Неустойчивые анимации на холсте

Question

Моя анимация холста плавная, как лед в хроме, но прерывистая, как плохая стрижка в Firefox. Самое странное, что это даже не сложный расчет. Кто-нибудь видит что-то не так (связано с производительностью) с моим кодом, который может вызвать это замедление?

Вот оно на jsfiddle: http://jsfiddle.net/Wu5Jh/

А вот и для ТАК:

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

});

Я надеялся избежать флеш-анимации или gif, но у меня не могло быть выбора.

Спасибо!

Answer 1

Я действительно не вижу никаких проблем, и я использую Chromium 8 и Firefox 3.6.13 в Linux.

Однако, если вам все еще нужны предложения по микрооптимизации, вы можете сделать такие вещи, как -2*pi/100, 1.5*pi и .5*pi в качестве собственных констант.Кроме того, это всего лишь предположение, но использование "copy" вместо "xor" для ctx.globalCompositeOperation может быть быстрее.Вы также можете сохранить угол дуги, который рассчитывается для первой нарисованной дуги, и использовать его для второй, а не просто рисовать полный круг.