画布中的动画片动画

我的画布动画在铬中像冰一样光滑，但在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(); 

});

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

谢谢！

来源

2010-12-15 Matrym

对我而言Firefox 3.6.12上看起来不错 – Reigel 2010-12-15 05:58:22

真的吗？它在3.6.13，PC – Matrym 2010-12-15 06:04:06

大约3分给我打了个电话，认为它很大程度上取决于你的计算机规格和当前负载。 – Orbling 2010-12-15 06:14:43

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

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

来源

2010-12-15 06:03:29

画布中的动画片动画

回答

相关问题