使用 globalCompositeOperation“destination-out”后，如何获得轮廓以包围新形状？答案

【问题标题】：After using the globalCompositeOperation "destination-out", how can I get the outline to enclose the new shape?使用 globalCompositeOperation“destination-out”后，如何获得轮廓以包围新形状？
【发布时间】：2012-11-23 13:20:41
【问题描述】：

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

【问题讨论】：

@Loktar 感谢您的提示，我现在已经标记了相应的答案。

标签： html canvas globalcompositeoperation

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

你的意思是这样的？：jsfiddle.net/kra86，它有点工作，但不够准确/不够干净。也许我可以跳过合成并将形状作为路径，但不确定如何制作曲线。