我不能动画画布生成的块

我使用HTML5画布和写了下面的程序：我不能动画画布生成的块

var canvas1 = document.getElementById("myCanvas"); 
    var context1 = canvas1.getContext("2d"); 
    var animation = 20; 
    var i = 0; 

    function draw(x) { 
     context1.fillStyle = "#FFF000"; 
     context1.fillRect(x,30,100,100); 
    } 

    function animate() { 
     while (i>1000) { 
       context1.clearRect(0,0,1000,200); 
       draw(animation); 
       if (animation >= 980){ 
         animation = 20; 
       } 
       animation++; 
     } 
    } 

    animate();

这以下块，我在http://ec2-54-83-18-3.compute-1.amazonaws.com/网页上托管。如果您查看网站，您可以看到，没有显示任何内容。但是，如果您取出“animate（）;”并放入“绘制（某些整数）”，它会显示一个大概黄色的立方体，但不包含动画。

我想让它发送从20像素到980像素（我的屏幕是1000像素宽度）沿x轴的黄色块。我希望它会无限期地移动，但我确信它之前已经终止，因为我想知道这是否是问题所在。它没有工作。

正如您从URL中看到的，我正在使用Amazon EC2 Web服务。我的实例是Ubuntu。

我的实例大小是micro（它有时会给Minecraft带来麻烦）。

我的操作系统是Windows 8.

我希望任何帮助。

谢谢。

编辑：我也希望尽快得到这个，因为我的网站上是我的服务器IP。我不想让黑客四处奔走试图在我的服务器上拉恶作剧或者更糟，而不是他们会发现什么值得他们的时间（因为它的域名，它的相当偏远，所以我想保持这种方式，直到我准备好了）。

来源

2014-10-05 user2624583

这与canvas没什么关系，还有更多关于JS在浏览器中的工作方式。因为几乎每个浏览器中的所有内容都运行在同一个线程中（包括运行JS，更新页面上的元素，然后绘制更新），这意味着如果您将十几件事放在为了循环，期待它们全部被绘制，直到JS停止运行才会真正发生。

这包括动画DOM元素，更改CSS等。如果在for循环中进行更改，直到循环结束时（以及调用函数的结束，它正在调用功能等）。

你实际上想要做的是设置某种计时器。

有很多方法可以做到这一点。新标准（按实际支持<canvas>是requestAnimationFrame(animate)每一个浏览器，其中animate是你的功能，支持将动画恰好是一帧。

您再次调用同样的功能得到动画的多个帧。

var keepGoing = true; 

function animate() { 
    /* ... draw stuff */ 
    if (keepGoing) requestAnimationFrame(animate); // calling itself 
} 

animate();

，或者（最好）

requestAnimationFrame(animate);

RequestAnimationFrame确实为你设置超时的工作，它也做一些事情，你不能这样做，W它试图将动画锁定到60fps，并在显示器的刷新周期内（在浏览器中永远不会访问的内容，但基本上是“V-Sync”）锁定该绘图。

您也可以手动做到这一点，通过管理setTimeout S或A setInterval（或setImmediate，如果支持的话/ polyfilled），但你没有它来自于专业的呼叫其他的好处。从道德观点来看，任何JS都应该是反动的（基于事件/消息的）或异步的（回调/承诺/包裹生成器等等）。
大多数服务器端的JS也应该这样。

来源

2014-10-05 02:34:20 Norguard

我不能动画画布生成的块

回答

相关问题