没有警报的JavaScript画布功能无法正常工作 [英] javascript canvas function not working without an alert

问题描述

我正在做一些演示网页，作为投资组合的一部分，以展示潜在的雇主。

一页是等离子球中等离子弧的模拟，然后旋转以查看弧'通过360度。

在每次重绘之后，如果我在每次重绘之后放置一个警报，然后在脚本运行时取消警报，则通过每次旋转重绘弧线。没有警报，什么都不会发生。

有没有人对此有过解释/解决方案？这里是重绘函数：

pre $ 函数reDraw（yAngle）//正在工作 - 通过360度重画圆弧以查看路径
{
var xCs;
var yCs;

（度数= 10;度数<360;度数= 1）//通过360度旋转球体
{

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）//在球体中心开始每次重绘
{
xCs = 300;
yCs = 300;
firstMove = false;
}

context1.beginPath（）;

context1.moveTo（xCs，yCs）;

spinAngle =（度/ 180 * Math.PI）;

//我们在XZ平面上旋转，因此解析XZ只会移动 - 从轴上检索每个正数或负数移动移动数组

xCs = xCs +（zCStep [moves] * Math.sin（spinAngle））+（xCStep [移动] * Math.cos（spinAngle））;

yCs = yCs + yCStep [moves];

context1.lineTo（xCs，yCs）;

context1.shadowBlur = 2;
context1.shadowColor =gray;

context1.strokeStyle =white;
context1.stroke（）;

}
alert（）;
}

}


解决方案

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

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

p>

上述问题的常见解决方案是使用一个计时器（ setInterval 看起来最适合您的特定情况，或 setTimeout ）以便让浏览器重新绘制内容（本例中为canvas元素）。

编辑：

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

基本上，存在的主要原因是我们不需要继续使用相同的定时器，具有浏览器优化的实现（vs定时器），并且最好与webworkers一起使用它（yay，extra THRE广告）。

起初这个API是一个相当活跃的规范（这就是为什么我忘了它），但到现在为止，尘埃似乎足以创造一个不错的polyfill（见上面的链接）。

我同意anno dec。 2013这是一个更好的解决方案，然后定义自己的计时器，因为如果您在不可见的选项卡中运行动画循环，浏览器将无法保持运行，这意味着更少的CPU，GPU和内存使用率，领先到更长的电池寿命。

I'm doing some demo web pages as part of a portfolio to show potential employers.
One page is the simulation of a plasma arc in a 'plasma ball' which then rotates to view the 'arc' through 360 degrees.
The redraw of the arc through each of the rotations ONLY works if I put an 'alert' after each redraw and then cancel the alerts when the script runs. Without the alert, nothing happens.

Does anyone have an explanation/solution for this? Here's the redraw function:

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

}

解决方案

Due to their (historically) single-threaded nature, Webbrowsers re-draw content when a (javascript) function(handler) ends (same problem with progress bars, ajax-loading gif, etc).
So, even when one iteration of your loop would take a full second (resulting in 1FPS), the canvas still wouldn't redraw (same goes for the rest of the page's content) until your javascript ends.

Small side note: one of the biggest advantages of HTML5 web-workers is that they run in their own thread so they don't 'block the browser'.

The (historically) common solution to the above problems is to use a timer (setInterval seems best for your particular case, or setTimeout) in order to have the browser redraw the content (in this case the canvas-element).

EDIT:
Stefano Ortisi reminded me in his comment below about requestAnimationFrame and provided an excellent link: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
Basically it's main reason for existence is so we don't need to keep using the same timers, having a browser-optimised implementation (vs timers) and ideally to use it together with webworkers (yay, extra thread).

At first this API was quite a 'living' specification (which is why I forgot about it), but by now the dust seems to have settled enough to create a nice polyfill (see above link).
I agree that anno dec. 2013 this is a better solution then defining your own timer, since "if you’re running the animation loop in a tab that’s not visible, the browser won’t keep it running, which means less CPU, GPU, and memory usage, leading to much longer battery life."

这篇关于没有警报的JavaScript画布功能无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！