javascript - 在 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 那样返回并修改路径中的点。你必须从一开始就用新的点重新制作它。