html - 使用 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();

​</p>

Answer 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();
​

Answer 2

我认为您可以在画布上绘制第三条弧线