我最近开始做一些 HTML5/Canvas 的东西,并且很高兴地开展我的业务,在 Chrome 中测试东西,直到我决定尝试我一直在 Firefox 中工作的东西......效果不太好。
这是我正在做的事情的一个简单例子。设置基本的 requestAnimationFrame shim,主循环清除画布,然后更新和绘制我的对象。很简单,关于这些东西的例子随处可见。
function loop() {
canvas.width = canvas.width;
requestAnimFrame(loop);
rR.update();
rG.update();
rB.update();
rY.update();
rR.draw();
rG.draw();
rB.draw();
rY.draw();
}
function Rect(color, x, y, speedX, speedY) {
this.x = x;
this.y = y;
this.color = color;
this.speedX = speedX;
this.speedY = speedY;
}
Rect.prototype.draw = function () {
context.fillStyle = this.color;
context.beginPath();
context.rect(this.x, this.y, 10, 10);
context.closePath();
context.fill();
};
Rect.prototype.update = function () {
if (this.x < 0 || this.x > canvas.width) this.speedX = …Run Code Online (Sandbox Code Playgroud)