html - HTML5 Canvas 中的自定义线条描边

Question

用HTML5 canvas元素绘制线条时，是否可以定义线条的笔触样式？基本上在 Photoshop 和其他类似程序中，您可以为看起来像“手绘”的线条定义笔触样式。是否可以在 HTML5 canvas 中做类似的事情，或者我在这里是为了登月吗？

谢谢

-杰西

Answer 1

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

这取决于你想要什么，它不应该太难。

如果“手绘”是指您想要抖动，则必须将每条绘制的线/曲线分成更小的部分，并为每个点添加一些噪声。

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

几乎所有这些都依赖于将直线和曲线分解成更小的部分，因此您应该首先弄清楚这一点。

如果您决定实现这些并且在分解贝塞尔曲线时遇到困难并需要帮助，请告诉我，我会为您提供我的代码。