javascript - 将笔划转换为 HTML Canvas 中的路径

Question

我可以绘制一条路径，使其不在屏幕上绘制而是转换为新路径吗？如果是，怎么办？

Answer 1

在 Canvas 中，(几乎)所有形状，描边或填充，都是路径。 Canvas 中没有“笔画”的概念，但有在路径上调用 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 那样返回并修改路径中的点。你得从头开始用新点重新制作它。