没有警报的JavaScript画布功能无法正常工作

本文介绍了没有警报的JavaScript画布功能无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在做一些演示网页，作为投资组合的一部分，以展示潜在的雇主。 一页是等离子球中等离子弧的模拟，然后旋转以查看弧'通过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 并提供了一个很好的链接： www.paulirish/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: www.paulirish/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."