暂停，恢复和重新启动画布动画与JS [英] Pause, Resume and Restart Canvas Animations with 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();
    });

});

推荐答案

添加此功能

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

并将drawArc更改为：

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

这篇关于暂停，恢复和重新启动画布动画与JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！