HTML5 - 画布形状描边

Question

我创建了两种形状，圆形和矩形，一个放在另一个的上面，就像一把钥匙锁。然后我尝试应用描边，但它抚摸了两个形状。我想要它做的只是抚摸合并的图案，而不是任何交叉点。

context.beginPath();
context.fillStyle = "#ccc";
context.arc(115, 550, 12, 0, 2 * Math.PI, false);
context.moveTo(105, 555);
context.fillStyle = "#999";
context.rect(105, 555, 20, 30);
context.fill();
context.stroke();
context.closePath();

如果我尝试先绘制矩形，那么当您描边时，顶部的圆弧会有额外的线条路径，就像我必须关闭路径然后再次绘制它一样。

Answer 1

如果您希望路径没有相交部分，则不能使用矩形和整个圆。

相反，您必须仅绘制圆的一部分和矩形的一部分。这应该适合你：

context.beginPath();
context.fillStyle = "#ccc";
context.arc(115, 550, 12, 2.5, 2.2 * Math.PI, false);
context.moveTo(105+20, 555);
context.fillStyle = "#999";
// instead of a rect, we really want three lines
context.lineTo(105+20,555+30);
context.lineTo(105,555+30);
context.lineTo(105,555);

context.fill();
context.stroke();
context.closePath();

Answer 2

在研究我自己的不规则形状答案时，我发现了克劳德教授的一个实验室项目解决了我的问题。

此页面 SVG-to-Canvas 将 SVG 图形解析为 Canvas 代码。因此，如果您有像 Illustrator 这样的应用程序，您可以使用它绘制图形并将图形保存为 SVG，那么您可以解析可用的画布代码并将它们插入。

Answer 3

您可以使用合成和临时画布。像这样的东西：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var tempCanvas = document.getElementById('tempCanvas');
var tempContext = tempCanvas.getContext('2d');
tempContext.save();
// clear temp context
tempContext.clearRect(0, 0, canvas.width, canvas.height);

// draw all rects with strokes
tempContext.beginPath();
tempContext.strokeStyle='red';
tempContext.lineWidth=3;
tempContext.arc(100, 100, 60, 0, 2 * Math.PI, false);
tempContext.rect(20,150,100,200); 
tempContext.stroke();

// set compositing to erase existing drawings 
// where the new drawings are drawn

tempContext.globalCompositeOperation='destination-out';

// fill all rects
// This "erases" all but the outline stroke
tempContext.beginPath();
tempContext.fillStyle='blue';
tempContext.arc(100, 100, 60, 0, 2 * Math.PI, false);
tempContext.rect(20,150,100,200);
tempContext.fill();


// draw outlines from tempcanvas into canvas
ctx.drawImage(tempCanvas, 0, 0);

// draw into canvas
ctx.beginPath();
ctx.fillStyle='green';
ctx.globalAlpha = 0.2;
ctx.rect(20,150,100,200);
ctx.arc(100, 100, 60, 0, 2 * Math.PI, false);
ctx.fill();

tempContext.restore();

还有一个jsfiddle： https://jsfiddle.net/EvaF/8to68dtd/2/< /a>