在HTML画布中将笔划转换为路径

Question

我可以描边路径，以便它不会在屏幕上绘制而是转换为新路径吗？如果是这样，怎么样？

Answer 1

在画布中，（几乎）所有形状，描边或填充，都是路径。画布中没有“笔画”的概念，但是在路径上调用stroke()的概念。

你可以做的是创建路径，填充它，然后在同一条路径上划线。

ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(100,100);
ctx.lineTo(25,100);
ctx.closePath();


ctx.fillStyle = 'gold'
ctx.fill();

// The path is still there, lets stroke it
ctx.lineWidth = 4;
ctx.stroke();

实例：

http://jsfiddle.net/9SK2C/

但请注意，一旦开始新路径，旧路径将永远丢失。没有内置的方法来保存或恢复路径。如果你想跟踪保存/恢复它的路径，你必须自己解决这个问题。

您也无法编辑路径。您可以将其添加到它的末尾，但是没有回头并且修改路径中的点，就像在SVG中那样。你必须从头开始用新点重新制作它。