Javascript 在极少数情况下，<；帆布>；不'；重画

我使用

在我的音乐教育web应用程序中绘制所有注释和图示符：

一位Firefox15.0.1用户报告说，有时练习会继续到下一个问题，但画布上仍然显示了上一个问题。我曾经在测试中看到过这种情况（在约500个问题中）

当它发生时，画布已通过

canvas.width=canvas.width

和对上下文的

.clearRect

调用被清除，而字形已通过

在JavaScript中绘制。beginPath

，

.quadraticCurveTo

，

closePath

等，画布的备份缓冲区似乎从未刷新/拉入窗口

我在过去看到过关于类似问题的bug报告：

我可以通过执行DOM hack来强制重画，例如插入一个文本节点作为画布的子节点，然后在下一个运行循环周期中将其删除，或者修改画布的背景色或填充。然而，这似乎很严厉，我一直有一种唠叨的感觉，觉得我错过了一些显而易见的东西

我的绘图代码非常简单：

canvas.width = width;
ctx.clearRect(0, 0, width, height);
ctx.save();
// Lots of drawing code here
ctx.restore()
ctx.clearRect(0, 0, 1, 1); // Helped force a repaint on some older WebKit browsers?

我已确保

.save

和

.restore

调用的数量是平衡的

1） 我直接调用此代码以响应

onclick

事件处理程序。我应该改为使用

requestAnimationFrame

或

setTimeout

在未来的运行循环周期中执行绘图吗

2） 我没有遗漏一些明显的东西，比如

canvas.pleaseRepaintNow（）

API，对吗

---

3） 有没有其他人遇到过类似的问题并求助于DOM修改来强制重画？

我试图让这个错误发生，但在疯狂地点击Firefox一段时间后，我从未看到它。这就是我清理画布的方式，看起来很有效，但请谨慎对待，因为我无法让错误发生，我也无法检查这是否修复了任何问题

// Store the current transformation matrix
ctx.save();

// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Restore the transform
ctx.restore();

添加

context.stroke（）

到

onLoad

函数的最后一行，它修复了Firefox中的一个bug。否则，在重新绘制窗口之前，不会渲染对画布的更改

至少对我来说是有效的

window.onload = function() {
   canvas = document.getElementById("canvas");
   context = canvas.getContext("2d");
   //Code here...
   context.stroke();
}

---

由于setTransform（）而进行的向上投票，我确实缺少了它。然而，问题仍然存在：（你有办法让它可靠地发生吗？还是一直点击？我没有，它只在我的机器上发生过一次。然而，用户可以在100个问题中可靠地重现它（在2011年MacBook Pro上的OS X 10.7上运行Firefox 15.0.1）。我已经尝试尽可能地匹配他的配置，但复制时没有运气。您是否考虑过要求用户禁用所有扩展和插件，以防某些行为不端的第三方代码是罪魁祸首？您知道这会影响到哪些Firefox版本吗？Firefox Bugzilla中是否有相应的条目？谢谢！这会影响Firefox版本吗有趣的是，他们说这个问题也发生在chrome上，尽管它是最新的。