HTML5画布中的自定义线条描边

Question

使用HTML5画布元素绘制线条时，是否可以定义线条的笔触样式？基本上在Photoshop和其他类似程序中，您可以为看起来像“手绘”的线条定义笔触样式。可以在HTML5画布中做任何类似的事情，还是我在这里为月球拍摄？

由于

-Jesse

Answer 1

有可能但不是默认情况下。请参阅ShadowCloud的帖子，了解默认情况下您可以执行的操作（非常少）。

根据你的需要，它不应该太难。

如果通过“手绘”表示您需要抖动，则必须将每条绘制的线条/曲线分解为更小的部分，并为每个点添加一些噪声。

如果你想要一个画笔，你必须将每个绘制的线条/曲线分成更小的部分，并每隔几个像素调用drawImage来模拟一个Photoshop笔刷。

几乎所有这些都依赖于将你的线条和曲线分解成更小的位，所以你应该把它弄清楚。

如果您决定实施这些并且无法分解bezier曲线并想要帮助，请告诉我，我会为您提供我的代码。

Answer 2

HTML5 Canvas中没有标准的API来管理这样的事情。

您可以设置笔触的颜色或宽度，例如：

context.strokeStyle = '#f00'; // red color
context.lineWidth   = 4; // 4px wide

// Draw some rectangles.
context.fillRect  (0,   0, 100, 100);
context.strokeRect(0,   0, 100, 100);

您可以尝试使用图书馆获得更多控制权（Processing.js或Fabric.js）