javascript画布函数在没有警报的情况下无法工作

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

由于其(历史上)单线程性质，Webbrowsers在(javascript)函数(处理程序)结束时重新绘制内容(进度条、ajax加载gif等方面的问题相同)。

因此，即使循环中的一次迭代需要整整一秒钟(导致1FPS)，直到javascript结束，画布仍然不会重新绘制(对于页面的其他内容也是如此)。

注意: HTML5网络工作者的最大优点之一是他们在自己的线程中运行，这样他们就不会“阻塞浏览器”。

解决上述问题的(历史上)常见的解决方案是使用计时器(对于特定情况来说，setInterval似乎是最好的)，以便让浏览器重新绘制内容(在本例中是画布元素)。

编辑：

Stefano Ortisi在下面关于requestAnimationFrame的评论中提醒我，并提供了一个很好的链接：http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

基本上，它存在的主要原因是，我们不需要继续使用相同的计时器，有一个浏览器优化的实现(vs计时器)，理想情况下，与网络工作者一起使用它(耶，额外的线程)。

起初，这个API是一个“活的”规范(这就是我忘记它的原因)，但是到现在，尘埃落定似乎已经足够创建一个很好的填充(参见上面的链接)。

我同意这一点。2013年，这是一个更好的解决方案，然后定义你自己的计时器，因为“如果你在一个不可见的选项卡中运行动画循环，浏览器就不会继续运行，这意味着CPU、GPU和内存使用量减少，导致电池寿命大大延长。”

Answer 2

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

脚本绘制该位图(但不在屏幕上)。浏览器会在有机会的时候呈现位图。

要让浏览器有机会在某个步骤绘制位图，您应该以某种方式将脚本的执行传递给浏览器:调用alert()、setTimeout/Interval或在动画框架( requestAnimationFrame )中进行绘图。

requestAnimationFrame在很大程度上是一个重新绘制浏览器视图的请求，在接下来的16 is (浏览器中最大60 fps )之后会出现。