8

<canvas>私は自分の音楽教育 Web アプリですべての音符とグリフを描画 するために使用します: http://www.musictheory.net/exercises/keysig/bc98yy

Firefox 15.0.1 のユーザーは、演習が次の問題に進むことがあると報告していますが、キャンバスにはまだ前の問題が表示されています。私はこれがテストで 1 回発生するのを見てきました (~500 問中)。

それが発生すると、キャンバスは両方を介してクリアされ、コンテキストでcanvas.width = canvas.widthの呼び出しと、、、など.clearRectを介して JavaScript でグリフが描画されます。ただし、キャンバスのバッキング バッファーがウィンドウにフラッシュ/描画されることはないようです。.beginPath.quadraticCurveTo.closePath

同様の問題に関するバグレポートを過去に見たことがあります。

キャンバスの子としてテキスト ノードを挿入し、次の実行ループ サイクルでそれを削除するか、キャンバスの背景色またはパディングを変更するなどの DOM ハックを行うことで、再描画を強制できます。しかし、これは手間がかかるように思えます。私は、明らかな何かが欠けているというしつこい感じを持ち続けています。

私の描画コードは非常に単純です。

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 の変更に頼ったことがありますか?

4

2 に答える 2

4

context.stroke();関数の最後の行に追加するとonLoad、Firefox のバグが修正されます。そうしないと、キャンバスへの変更は、ウィンドウが再描画されるまでレンダリングされません。

少なくとも私の場合はうまくいきました。

window.onload = function() {
   canvas = document.getElementById("canvas");
   context = canvas.getContext("2d");
   //Code here...
   context.stroke();
}
于 2012-10-15T22:30:11.437 に答える
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();
于 2012-10-09T03:30:45.667 に答える