画布中的断断续续的动画答案

【问题标题】：Choppy animations in canvas画布中的断断续续的动画
【发布时间】：2011-05-25 17:18:24
【问题描述】：

我的画布动画在 chrome 中像冰一样平滑，但在 Firefox 中像糟糕的发型一样断断续续。最奇怪的是，它甚至不是一个复杂的计算。有没有人发现我的代码有任何问题（与性能相关）可能会导致速度变慢？

这是在 jsfiddle 上： http://jsfiddle.net/Wu5Jh/

这是给 SO 的：

$(document).ready(function(){
    //vars
    var x = 20,
            y = 20,
            pi = Math.PI,
            width,
            height,
            complete = 100,
            refreshInterval,
            ctx;

    // computed vars
    function init() {
      ctx = $('#canvas')[0].getContext("2d");
      width = $("#canvas").width();
      height = $("#canvas").height();  
        center = [width/2, height/2];
      refreshInterval = (function doSetTimeout(){
            draw();
            setTimeout(doSetTimeout, 30);
            })();
        };

    function circle(x,y,r) {

        // Draw the growing circle
        ctx.fillStyle = "#09f";
      ctx.beginPath();
    ctx.moveTo(x, y); // center of the pie
      ctx.arc(
            x, 
            y, 
            r, 
            -2*pi*complete/100 + pi*1.5,
            -pi*.5,
            true
        );
        ctx.lineTo(x, y);
      ctx.closePath();
      ctx.fill();

        // Draw the cutout
        ctx.globalCompositeOperation = "xor";
        ctx.fillStyle = "#fff";
        ctx.beginPath();  
        ctx.arc(x,y,r/2,0,pi*2,true); 
        ctx.fill();
    }

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

    function timeCheck(){
        if (complete>0){
            complete -= 1;
        }
        else {
            clearInterval(refreshInterval);
        }
    }

    function draw() {
      clear();
      circle(x, y, 20);
        timeCheck();
    }

    init();

});

我希望避免使用 Flash 动画或 gif，但我可能别无选择。

谢谢！

【问题讨论】：

在 Firefox 3.6.12 上看起来不错
真的吗？它在 3.6.13 的 3 点对我来说很糟糕，PC
请考虑这在很大程度上取决于您的计算机规格和当前负载。
是的，问题是我刚刚重新启动并使用四核，但仍然不稳定。我的意思是，也许我夸大了它的数量，但它在 chrome 中显然更平滑。
我在 FF 中有一些动画，看起来也很不稳定！

标签： javascript jquery firefox canvas svg

【解决方案1】：

我真的没有发现任何问题，我在 Linux 上使用的是 Chromium 8 和 Firefox 3.6.13。

但是，如果您仍然需要有关微优化的建议，那么您可以将 -2*pi/100、1.5*pi 和 .5*pi 等内容作为自己的常量。此外，这只是一个猜测，但使用 "copy" 而不是 "xor" 代替 ctx.globalCompositeOperation 可能会更快。您还可以存储为绘制的第一个弧计算的弧角，并将其用于第二个弧，而不仅仅是让它绘制一个完整的圆。

【讨论】：