HTML5 Canvas - デスティネーションアウト合成問題

Question

私はキャンバスの中にいくつかの曲線を描いています。カーブが完了したら、私は描画の一部を元に戻す必要があります（カーブの最初の75％が必要なので、カーブの最後の25％を削除する必要があります）。

以下は、私の曲線が通過するポイントのログです。 7番目のポイントの後、私はキャンバスコンテキストの "globalCompositeOperation"プロパティを "destination-out"に変更して、逆に描画を開始します。下から見ることができるように、順方向と逆方向の点はまったく同じです。しかし、私の問題は、後方を削除する間、行が正しく削除されていないということです。私は微妙な痕跡を見ることができます。 Chrome、Firefox、Operaで問題が確認されました。

point X: (484,324) with Count: 0 angle :0.7853981633974483 
spiroCanvasCore.js:62point X: (460,420) with Count: 1 angle :1.5707963267948966 
spiroCanvasCore.js:62point X: (315,444) with Count: 2 angle :2.356194490192345 
spiroCanvasCore.js:62point X: (220,300) with Count: 3 angle :3.141592653589793 
spiroCanvasCore.js:62point X: (315,155) with Count: 4 angle :3.9269908169872414 
spiroCanvasCore.js:62point X: (460,179) with Count: 5 angle :4.71238898038469 
spiroCanvasCore.js:62point X: (484,275) with Count: 6 angle :5.497787143782138 
spiroCanvasCore.js:62point X: (460,300) with Count: 7 angle :6.283185307179586 
spiroCanvasCore.js:79inverse 
spiroCanvasCore.js:62point X: (484,275) with Count: 7 angle :5.497787143782138 
spiroCanvasCore.js:62point X: (460,179) with Count: 6 angle :4.71238898038469 
spiroCanvasCore.js:62point X: (315,155) with Count: 5 angle :3.9269908169872414 
spiroCanvasCore.js:62point X: (220,300) with Count: 4 angle :3.141592653589793 
spiroCanvasCore.js:62point X: (315,444) with Count: 3 angle :2.356194490192345 
spiroCanvasCore.js:62point X: (460,420) with Count: 2 angle :1.5707963267948966 
spiroCanvasCore.js:62point X: (484,324) with Count: 1 angle :0.7853981633974483 

この問題やその他の選択肢/ソリューションの原因は何ですか？ここで

は削除後、私の曲線のスクリーンショットです：

EDIT：代わりに「deatinationアウト」にglobalCompositeOperationプロパティを変更するのは、私は単に私の背景と一致するようにキャンバスコンテキストのstrokestyleを変更しました色。しかし、それでも問題は残る

Answer 1

問題の原因はアンチエイリアスです。コードの最初のセットではhttp://jsfiddle.net/9bheb/5/

ctx.lineWidth = 1; 

ctx.strokeStyle = '#f00'; 
ctx.strokeRect(10.5, 10.5, 20, 20);  
ctx.strokeStyle = '#fff'; 
ctx.strokeRect(10.5, 10.5, 20, 20); 

// Middle case omitted for brevity 

ctx.strokeStyle = '#f00'; 
ctx.strokeRect(40, 10, 20, 20); 
ctx.strokeStyle = '#fff'; 
ctx.strokeRect(40, 10, 20, 20); 

100％不透明1ピクセルの赤線が正確にキャンバスのグリッドに整列描かれ、上記左に見られる：合成モードとは別に、以下を考えます。その後100％不透明な白い線が上に描画され、元の線が消えます。

2番目のコードセットでは、1pxラインは2つのピクセル間に正確に跨っているため、2pxの50％の不透明な赤い枠線として描画されます。次に、2x50％の白い線がの上に描画され、となり、キャンバスに25％の赤色（薄いピンク）の境界線が残っています（右上に表示）。これはおおよそあなたの場合に起こっていることですが、合成モードを介しています。

パスをもう一度引き出してパスを消去することはできません。

Answer 2

代わりに部分を "削除"する代わりに、削除する部分が決して作られないように、カーブの部分の周りにクリッピング領域を作ることができますか？

Answer 3

Phrogzの素敵な分析から始めて、わずかに大きなlineWidthで消去すると、残りのシャドウを取り除くことができます。

消去時にlineWidth = 2と設定してjfiddleで試してみてください。ここに私のフォークがあります：// http://jsfiddle.net/UxfNg/3/