暂停，恢复和重新启动画布动画与JS

有没有反正暂停，恢复和重新启动我的画布弧动画进度条？ Ive添加了点击功能到位，但不知道从哪里开始为了achive什么im后。任何人都可以借一只手吗？

Is there anyway to pause, resume and restart my canvas arc animation progress bar? Ive added the click functions in place but no idea where to start in order to achive what im after. Can anyone lend a hand?

我在这里添加了一个工具： http://jsfiddle.net/4txsqeoh/2/

Ive added a working fiddle here: http://jsfiddle.net/4txsqeoh/2/

我想制作单独的函数，所以可以在需要时从点击事件等调用..

I would like to make seperate functions so can call when needed from the click events etc..

更新：我在点击事件和空函数中添加了调用，但不确定从这里开始，从新到JS。

UPDATE: Ive added calls in the click events and empty functions but not sure where to go from here, im new to JS.

感谢

JS：

function init() {
    var c = document.getElementById('draw');
    return c.getContext('2d');
}

function clear(ctx) {
    ctx.clearRect(0, 0, 200, 200);
}

function PercentProgress(ctx, percent) {
    this.ctx = ctx;
    this.speed = 4;
    this.x = 100;
    this.y = 100;
    this.radius = 50;

    this.setPercent = function (percent) {
        this.degrees = 360 * (percent / 100);
        this._animationOffset = this.degrees;
        this.percent = percent;
    };

    // Part of initialization
    this.setPercent(percent);

    this.startProgress = function () {
        var self = this;
        clear(this.ctx);
        this._interval = setInterval(function () {
            self.drawProgress();
        }, 10);
    };

    this.pauseProgress = function () {

    };

    this.resumeProgress = function () {

    };

    this.restartProgress = function () {

    };

    this.drawArc = function () {
        var startDegrees = -90;
        var endDegrees = startDegrees + this.degrees - this._animationOffset;
        // Degrees to radians
        var startAngle = startDegrees / 180 * Math.PI;
        var endAngle = endDegrees / 180 * Math.PI;
        // Draw arc
        this.setLineStyles();
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, startAngle, endAngle, false);
        ctx.stroke();
    };

    this.setLineStyles = function () {
        ctx.strokeStyle = '#FF1251';
        ctx.lineWidth = 10;
        ctx.lineCap = 'round';
    };

    this.drawProgress = function () {
        if (this._animationOffset < 0) {
            this._animationOffset = 0;
        }
        clear(this.ctx);
        this.drawArc();
        this._animationOffset -= this.speed;
        if (this._animationOffset < 0) {
            clearInterval(this._interval);
        }
    };

}

$(document).ready(function () {

    // lets start the progress
    var ctx = init();
    var percentage = 100;
    var progress = new PercentProgress(ctx, percentage);
    //progress.startProgress();

    $(document).on('click', '#pause-progress', function (e) {
        // pause progress
        progress.pauseProgress();
    });

    $(document).on('click', '#resume-progress', function (e) {
        // resume progress
        progress.resumeProgress();
    });

    $(document).on('click', '#restart-progress', function (e) {
        // restart progress
        progress.startProgress();
    });

});