javascript Canvas 功能在没有警报的情况下无法正常工作

Question

我正在制作一些演示网页作为作品集的一部分，以向潜在雇主展示。
一页是“等 ionic 球”中等 ionic 弧的模拟，然后旋转以 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)， Canvas 仍然不会重绘(页面的其余内容也是如此)，直到您的 javascript 结束。

小提示:HTML5 网络 worker 的最大优势之一是它们在自己的线程中运行，因此它们不会“阻塞浏览器”。

上述问题的(历史上)常见解决方案是使用计时器(setInterval 似乎最适合您的特定情况，或 setTimeout)以使浏览器重绘内容(在本例中为 Canvas 元素)。

编辑:
Stefano Ortisi 在下面关于 requestAnimationFrame 的评论中提醒我，并提供了一个很好的链接:http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
基本上它存在的主要原因是我们不需要继续使用相同的计时器，拥有浏览器优化的实现(与计时器相比)并且理想情况下将它与网络 worker 一起使用(是的，额外的线程)。

起初这个 API 是一个非常“活”的规范(这就是我忘记它的原因)，但现在似乎尘埃落定足以创建一个漂亮的 polyfill(见上面的链接)。
我同意 anno dec。 2013 年，这是一个比定义您自己的计时器更好的解决方案，因为“如果您在不可见的选项卡中运行动画循环，浏览器将不会使其继续运行，这意味着更少的 CPU、GPU 和内存使用，导致以延长电池生命周期。”