clearRectは、縦線を描画するときにキャンバスをクリアしません。

Question

私は、キャンバスを使って仕事をしている奇妙なエッジケースにぶつかりました。 clearRectは、キャンバスの上から下に向かって縦線を描画するときにキャンバスをクリアしません。他のものをレンダリングすると、clearRectはうまく動作します。

これは意図的な動作であるか、ブラウザのバグか（Chromeでの動作がChrome、Safari、FireFox、Operaで同一であるとは考えにくい）かどうかわかりません。 意図的な動作であれば、その背後にある理論的根拠を誰かが知っているのでしょうか？

私はキャンバスをクリアしていないだけで組み合わせclearRect /垂直線、明確な挙動を示す小さなテストケースを作った： http://jsfiddle.net/kZj6F/

ありがとう！

Answer 1

beginPathが見つからないことが原因で、次の行が同じパスに追加され、strokeがすべての行を描画しています。

clearRectオプションを使用してドットに戻って行に戻すと、最後に描画されるパスにarcが追加されていることがわかります。電話番号ctx.beginPath();をctx.moveTo(randomX + 0.5, 0); ctx.lineTo(randomX + 0.5, canvas.height);より先に追加するだけで問題は解決します。

http://jsfiddle.net/kZj6F/1/を確認して動作確認できます。

パスに追加されたパスがクリアされていない場合は、他のシェイプと同じになります。