使用globalCompositeOperation“destination-out”后，如何将轮廓包围新形状？

Question

我有一个带有蓝色轮廓的圆弧，然后是一个圆圈，使用全局复合运算符“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();

Answer 1

我认为你可以将第三个弧绘制到画布

Answer 2

<强> live Demo

我所做的是将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();
​