Question

我正在使用HTML5 canvas并编写了以下程序：

    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/的网页上托管以下这个块。如果您查看网站，可以看到，没有显示任何内容。但是，如果你拿出＆＃34; animate（）;＆＃34;并放入＆＃34;绘制（某个整数）;＆＃34;，它显示一个大致黄色的立方体，就像它应该的那样，但是没有动画。

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

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

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

我的操作系统是Windows 8。

我希望其中任何一个都有帮助。

感谢。

编辑：我也希望尽快得到这个，因为在我的网站上是我的服务器IP。我不想让黑客在我的服务器上恶作剧，或者更糟糕的是，他们不会发现任何值得花时间的东西（因为它的域名，它非常偏远，所以我想保持这种方式直到我准备好了。

Answer 1

这与canvas没什么关系，更多的是与浏览器中的JS如何工作有关。

因为几乎所有浏览器中的所有内容都在同一个线程中运行（包括运行JS，更新页面上的元素，然后绘制更新），这意味着如果你在for中放入了十几个东西循环，期望它们全部被绘制，它实际上不会发生，直到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为您设置超时功能;它还可以做一些你无法做到的事情，即尝试将动画锁定到60fps，并在你的显示器刷新周期中及时锁定该绘图（你无法访问的内容）浏览器，但基本上是＆＃34; V-Sync＆＃34;）。

您也可以手动执行此操作，方法是管理setTimeout或setInterval（或setImmediate，如果支持/已填充），但您没有其他人来自专业电话会议的好处。

道德观点是，从浏览器的角度来看，几乎任何JS都应该是反动的（基于事件/消息的）或异步的（回调/保证/包装生成器等等）。大多数服务器端JS也应该这样做。

我无法为画布生成的块设置动画

1 个答案: