在极少数情况下,<canvas>不会重绘

Question

我用<canvas>我的音乐教育网络应用程序绘制所有笔记和字形:http: //www.musictheory.net/exercises/keysig/bc98yy

Firefox 15.0.1用户报告说,有时练习会继续讨论下一个问题,但画布仍会显示上一个问题.我已经看到这种情况发生在一次测试中(大约500个问题).

遇到这样的情况,在画布已经通过清除两者canvas.width = canvas.width并调用.clearRect上下文和字形在JavaScript中通过绘制.beginPath,.quadraticCurveTo,.closePath,等.然而,这似乎是在画布上的后盾缓冲区永远不会被刷新/被拉入窗口.

我在过去看到过有关类似问题的错误报告:

• https://bugzilla.mozilla.org/show_bug.cgi?id=787623
• https://bugzilla.mozilla.org/show_bug.cgi?id=794337
• http://code.google.com/p/chromium/issues/detail?id=55339

我可以通过执行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修改来强制重绘？

Answer 1

我试图让这个错误发生，但在 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();