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

Question

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

Answer 1

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

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

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

示例：

How to smoothly vary width at various points of a bezier curve drawn using glDrawArray()

我还建议你研究像Inkscape这样的开源绘图应用程序的源代码。