Question

我创建了2个形状，圆形和矩形，一个在另一个上面，类似于一个钥匙锁。然后我尝试应用一个笔划，但它抚摸两个形状。我想要它做的只是描绘合并的模式而不是任何交叉点。

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

在处理我自己的不规则形状答案时，我发现Cloud教授的一个实验室项目解决了我的问题。

此页面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/

HTML5 - 画布形状描边

3 个答案: