2

青いアウトラインの円弧と、グローバル複合演算子「destination-out」を使用して円弧の一部を覆う円があり、その結果、円弧の一部が取り消されたり切り取られたりしますが、新しい形状の一部は失われませんアウトライン、形状のアウトラインを再確立する簡単な方法はありますか?

実際の例はここにあります: http://jsfiddle.net/NY2up/

アーク

var ctx = document.getElementById("display").getContext('2d');

ctx.beginPath();
ctx.arc(100, 100, 50, 0.0, 1.5, false);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.fillStyle = 'red'
ctx.fill();
ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.stroke();

ctx.globalCompositeOperation = "destination-out";
ctx.beginPath();
ctx.arc(100, 100, 20, 0, Math.PI*2, true);
ctx.fill();
ctx.closePath();

</p>

4

2 に答える 2

1

ライブデモ

私がしたことは、効果を与えるためにglobalComposition背中をリセットsource-overし、スポット上で部分的な弧を描くことでした.

ctx.beginPath();
ctx.arc(100, 100, 50, 0.0, 1.5, false);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.fillStyle = 'red'
ctx.fill();
ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.stroke();


ctx.globalCompositeOperation = "destination-out";
ctx.beginPath();
ctx.arc(100, 100, 20, 0, Math.PI*2, true);
ctx.fill();
ctx.closePath();

// reset the global comp and draw a partial arc with the proper radians.
ctx.globalCompositeOperation = "source-over";
ctx.beginPath();
ctx.arc(100, 100, 20, 1.61,-0.11, true);
ctx.stroke();
ctx.closePath();
​
于 2012-12-05T21:18:47.150 に答える
0

3つ目の弧をキャンバスに描けると思います

于 2012-12-05T17:19:52.047 に答える