使用 JS 暂停、恢复和重新启动 Canvas 动画

Question

是否有暂停、恢复和重新启动我的画布弧动画进度条的方法？我已经添加了点击功能，但不知道从哪里开始以实现我所追求的。

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

我想制作单独的函数，以便在需要时从点击事件等中调用。

更新

我在点击事件和空函数中添加了调用，但不知道从哪里开始，我是 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();
    });

});

Answer 1

只需添加这两个功能：

   this.stop = function(){
            clearInterval(this._interval);
    }

    this.resume = function(){
         var self = this;
         clearInterval(self._interval);
         this._interval = setInterval(function () {
            self.drawAnimation();
        }, 10);
    }

并像这样设置点击动作

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

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

    $(document).on('click', '#restart-progress', function (e) {
        // restart progress
       anim.stop();
       anim = new PercentAnimation(ctx, percentage);
       anim.startAnimation();
    });

Answer 2

添加此功能

    this.setLineStylesCircle = function () {
        ctx.strokeStyle = '#001251'; //set the collor here
        ctx.lineWidth = 10;
        ctx.lineCap = 'round';
    };

并将 drawArc 更改为：

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 circle
        this.setLineStylesCircle();
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, 7, false);
        ctx.stroke();        
        // Draw arc
        this.setLineStyles();
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, startAngle, endAngle, false);
        ctx.stroke();
    };