Pause, resume and restart Canvas animations with JS

问题

Is there anyway to pause, resume and restart my canvas arc animation progress bar? I've added the click functions in place but no idea where to start in order to achieve what I'm after.

I've added a working fiddle here: http://jsfiddle.net/4txsqeoh/2/

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

Update

I've added calls in the click events and empty functions but not sure where to go from here, I'm 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();
    });

});

回答1:

add this function

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

and change drawArc to this :

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();
    };

回答2:

just add this two functions :

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

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

and set the click actions like this

 $(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();
    });

来源：https://stackoverflow.com/questions/28279776/pause-resume-and-restart-canvas-animations-with-js