HTML5 Canvas - Destination-Out Composition问题

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

有谁可以告诉，可能导致此问题的原因或任何其他替代方案/解决方案？

以下是删除后我的曲线的截图：

编辑：我没有将globalCompositeOperation属性更改为'deatination-out'，而是简单地更改了画布上下文的stroke风格以匹配我的背景颜色。但问题仍然存在

Answer 1

而不是“删除”某个部分而不是在曲线所需的部分周围形成一个剪裁区域，以便永远不会创建要删除的部分？

Answer 2

您的问题的原因是抗锯齿。请考虑以下内容，与合成模式分开：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％不透明的1px红线，与画布网格完全对齐，如左上图所示。然后在它的上方绘制100％不透明的白线，消除原始线条。

在第二组代码中，1px线恰好跨越两个像素之间，因此绘制为2px 50％不透明度红色边框。然后在 上绘制一条2px 50％的白线，在画布上留下25％的红色（浅粉色）边框（见右上图）。这大致就是你的情况，尽管是通过合成模式。

您无法通过再次覆盖路径来“擦除”路径。

Answer 3

从Phrogz的漂亮分析开始，如果你用稍大的lineWidth擦除，你将能够摆脱你剩下的阴影。

尝试使用他的jfiddle，在擦除时设置lineWidth = 2。这是我的fork：// http://jsfiddle.net/UxfNg/3/