我最近开始做一些 HTML5/Canvas 的东西,并且非常愉快地开展我的业务,在 Chrome 中测试东西,直到我决定尝试我在 Firefox 中所做的工作......效果不太好。
这是我正在做的那种事情的一个简单的例子。设置基本的 requestAnimationFrame 垫片,主循环清除画布,然后更新并绘制我的对象。很简单,关于这些东西的例子随处可见。
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 = -this.speedX;
if (this.y < 0 || this.y > canvas.height) this.speedY = -this.speedY;
this.x += this.speedX;
this.y += this.speedY;
};
var rR = new Rect("#FF0000", canvas.width/2, canvas.height/2, 2, 2);
var rG = new Rect("#00FF00", canvas.width/2, canvas.height/2, -2, -2);
var rB = new Rect("#0000FF", canvas.width/2, canvas.height/2, 2, -2);
var rY = new Rect("#FFFF00", canvas.width/2, canvas.height/2, -2, 2);
http://jsfiddle.net/Polaris666/psDM9/3/
当我在 Chrome 中测试它时,它看起来很棒,但 Firefox 有很多口吃和撕裂,这似乎是一项相当简单的任务。
我发现了类似的问题,但没有一个明确的解决方案。这是火狐的事情吗?Webkit 浏览器在这方面做得更好吗?我应该放弃它并希望它在未来版本的浏览器中得到修复吗?或者也许这是我的特殊设置?我正在使用带有 FireFox 17.0.1 的 Windows 7 64 位。
任何帮助表示赞赏。