canvas - 在 HTML5 上绘制宽度变化的贝塞尔曲线使用 Javascript

Question

是否有可能以任何方式改变线宽，例如基于画布的绘图应用程序的图像中的线宽？由于线宽没有类似渐变的值（不同的开始 - 不同的结束），我正在寻找尽可能接近下图的最佳方法。

Answer 1

HTML5 <canvas>API 不提供如此复杂的功能。

您最好的选择是使用您需要的任何算法编写您自己的线像素渲染器。然而，渲染器可能有点慢，因为逻辑必须用纯 Javascript 实现。

在这种情况下，问题变得更加通用“如何在位图上绘制不同宽度的贝塞尔曲线”，而 Javascript<canvas>只是该算法的一种实现。

例子：

如何平滑地改变使用 glDrawArray() 绘制的贝塞尔曲线的各个点的宽度

我还建议您研究像 Inkscape 这样的开源绘图应用程序的源代码，它们是如何做到这一点的。