javascript - 嵌套setInterval函数可成功更改多个 Canvas 动画的 Canvas 上下文

这是我正在尝试做的事情。目前，我有2个canvas元素，我希望对其进行扩展（例如，添加更多）。无论哪种情况，我目前都可以在一个canvas元素上正常工作，但是，我想（通过下面的代码中的预构建changeContext（）函数）以迭代的方式从一个canvas元素切换到另一个。我试图通过beginAnimation（）函数触发一个动画，然后在完成之后，将画布上下文更改为下一个画布，同时通过beginAnimation（）函数推送下一个实例化对象。我感觉我可能必须通过嵌套setInterval和/或setTimeout函数来执行此操作，但是，我不太擅长于这两个函数。

任何反馈，评论和/或建议都将不胜感激。

window.addEventListener('load', eventWindowLoaded, false);

function eventWindowLoaded() { canvasApp(); }

function canvasSupport() { return Modernizr.canvas; }

function canvasApp() {

// if: no canvas support return, else declare 2D canvas
if (!canvasSupport()) { return; } else {
    var theCanvas = document.getElementById('cvs-1');
    var context = theCanvas.getContext('2d');
}

function changeContext(num) {
    theCanvas = document.getElementById('cvs-' + num);
    context = theCanvas.getContext('2d');
}

var stepStart = 0;
var stepEnd = 0.00;

// Constructor: myPercentage
var myPercentage = function(percentage) {
    this.strokeStyle = '#2B5981';                       // Blue
    this.lineWidth = 10;
    this.percentage = percentage;                       // Percentage
    this.degrees = this.percentage * 360.0;
    this.radians = this.degrees * (Math.PI / 180);
    this.x = 57.5;
    this.y = 57.5;
    this.r = 45;
    this.s = 1.5 * Math.PI;
    this.drawShape = function() {
        context.strokeStyle = this.strokeStyle;
        context.lineWidth = this.lineWidth;
        function clearCanvas(x,y,width,height) {
            context.rect(x,y,width,height);
            context.fillStyle = '#FCFCFC';
            context.fill();
        }
        function circle(x,y,r,startAngle,endAngle,counterClockwise) {
            context.beginPath();
            context.arc(x,y,r,startAngle,endAngle,counterClockwise);
            context.shadowColor = '#242424';
            context.shadowBlur = 7;
            context.stroke();
            context.closePath();
        }
        function writePercentage(percentage) {
            context.font = '20px Georgia';
            context.fillStyle = 'black';
            context.fillText(Math.round(percentage*100)+'%',40,62);
        }
        clearCanvas(0,0,115,115);
        this.degrees = this.percentage * 360.0;
        this.radians = this.degrees * (Math.PI / 180);
        circle(this.x,this.y,this.r,this.s,this.radians+this.s,false);
        writePercentage(this.percentage);
        context.save();
    };
};

function setSteps(object) {
    stepStart = 0;
    stepEnd = object.percentage * 100;
    object.percentage = 0.00;
}

//Instantiate: new percentages
var phpPerc = new myPercentage(0.75);
var jsPerc = new myPercentage(0.25);

function beginAnimation(object) {

    setSteps(object);

    setInterval(function() {
        if (stepStart < stepEnd) {
            object.percentage += 0.01;
            object.drawShape();
            stepStart++;
        } else {
            clearInterval();
        }
    }, 33);
}

beginAnimation(phpPerc);
// changeContext(2);
// beginAnimation(jsPerc);

此示例应在此处访问-> http://jsfiddle.net/justinbyrne001/TS8w7/

最佳答案

进行诸如.getElementById之类的DOM请求相对昂贵。

更好的方法是在应用程序开始时获得对所有画布和上下文的引用。

// get all canvas and context references once at the start of your app

var canvases=[];
canvases.push(document.getElementById('cvs-1'));
canvases.push(document.getElementById('cvs-2'));
canvases.push(document.getElementById('cvs-3'));

var contexts=[];
for(var i=0;i<canvases.length;i++){
    contexts.push(canvases[i].getContext('2d');
}

然后，您可以将theCanvas和context变量设置为任何所需的画布和上下文。

function changeContext(num) {
    theCanvas = canvases[num];
    context = contexts[num];
}

顺便说一句，您可能想使用一个画布而不是多个画布来测试代码。 Canvas可以快速高效地处理多套工程图。您可能会发现1个画布足够快，并且比多个画布占用更少的资源。