使用Javascript在HTML5上繪製寬度變化的貝塞爾曲線

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的源代碼，他們這樣做是如何。