Question

我正在做一些演示网页作为投资组合的一部分，以显示潜在的雇主一页是“等离子球”中等离子弧的模拟，然后旋转以通过360度观察“弧” 如果我在每次重绘后放置一个“警报”，然后在脚本运行时取消警报，则只通过每次旋转重绘弧线。没有警报，没有任何反应。

有没有人对此有解释/解决方案？这是重绘功能：

function reDraw(yAngle) //work in progress - redraw the arc through 360 degrees to see the path
{
   var xCs;
   var yCs;

   for(degrees=10; degrees<360; degrees+=1)//spin sphere through 360 degrees
   {   

      context1 = document.getElementById("canvas1").getContext("2d");

      context1.clearRect(0,0,600,600);

      radialGrad(1,'canvas1',300,300,300,300,300,0,0,1,colour1,colour2,0,0,600,600);

      firstMove=true;

      for(moves=0; moves<axisMove; moves++)
      {
         if(firstMove)//start at centre of sphere for each re-draw
         {
            xCs=300;
            yCs=300;
            firstMove=false;         
         }

         context1.beginPath();

         context1.moveTo(xCs,yCs);         

         spinAngle=(degrees/180*Math.PI);

         //we are spinning in the X-Z plane so resolve X-Z moves only - retrieve each positive or negative move from the axis move arrays

         xCs=xCs+(zCStep[moves]*Math.sin(spinAngle))+(xCStep[moves]*Math.cos(spinAngle));

         yCs=yCs+yCStep[moves];

         context1.lineTo(xCs,yCs);

         context1.shadowBlur=2;
         context1.shadowColor="grey";

         context1.strokeStyle="white";
         context1.stroke();

      }
      alert();   
   }

}

Answer 1

由于它们（历史上）单线程性质，Web浏览器在（javascript）函数（处理程序）结束时重新绘制内容（与进度条，ajax加载gif等相同的问题）。
因此，即使你的循环的一次迭代需要一整秒（导致1FPS），画布仍然不会重绘（对于页面的其余内容也是如此），直到你的javascript结束。

小方面注意：HTML5网络工作者最大的优势之一就是他们在自己的线程中运行，因此他们不会“阻止浏览器”。

上述问题的（历史上）常见解决方案是使用计时器（setInterval似乎最适合您的特定情况，或setTimeout），以便让浏览器重绘内容（在此case canvas-element）。

修改
Stefano Ortisi在下面的评论中提醒我requestAnimationFrame并提供了一个很好的链接：http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
基本上它存在的主要原因是我们不需要继续使用相同的计时器，具有浏览器优化的实现（与计时器相比），并且理想地将它与webworkers一起使用（yay，extra thread）。

起初这个API是一个非常“活跃”的规格（这就是为什么我忘记了它），但到现在为止，尘埃似乎足以形成一个很好的填充物（参见上面的链接）。
我同意anno dec。 2013年这是一个更好的解决方案，然后定义自己的计时器，因为“如果你在一个不可见的标签中运行动画循环，浏览器将无法继续运行，这意味着更少的CPU，GPU和内存使用，领先更长的电池寿命。“

Answer 2

根据其定义，<canvas>元素使用位图缓冲区。您可以考虑具有可修改位图的<canvas> <img>。

脚本绘制该位图（但不在屏幕上）。并且浏览器在有机会时呈现位图。

为了让浏览器有机会在某个步骤绘制位图，您应该以某种方式从脚本到浏览器执行：调用alert()，setTimeout / Interval或在动画帧中进行绘制（{{ 1}}）。

requestAnimationFrame几乎是一个重绘浏览器视图的请求，它将在接下来的16毫秒（浏览器中最多60 fps）之后发生。

没有警报，javascript canvas功能无法正常工作

2 个答案: