HTML5 - 画布形状描边答案

【问题标题】：HTML5 - Canvas Shape StrokeHTML5 - 画布形状描边
【发布时间】：2011-04-08 07:23:52
【问题描述】：

我创建了 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();

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

【问题讨论】：

标签： html canvas shapes

【解决方案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();

【讨论】：

我明白了，所以没有办法合并形状？你只需要画你想要的。干杯。
技术上还有其他方法可以达到相同的效果。你可以用黑色填充一个矩形和一个圆形，然后在它们上面填充一个小 2 像素的矩形和圆形。这将达到相同的效果（我认为），根本不使用任何路径。但是如果你想使用路径，你不能只与它们相交，你必须画出精确的东西。

【解决方案2】：

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

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

【讨论】：

【解决方案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/

【讨论】：