canvas - HTML5 でベジェ曲線の幅を変化させる描画Javascript の使用

Question

キャンバスベースの描画アプリの画像のように線の太さを変えることはできますか? 線幅にはグラデーションのような値 (異なる開始 - 異なる終了) がないため、可能な限り下の画像に近いものを取得するための最良の方法を探しています。

Answer 1

HTML5 <canvas>API は、そのような複雑な機能を提供しません。

最善の策は、必要なアルゴリズムを使用して独自のライン ピクセル レンダラーを作成することです。ただし、ロジックは純粋な Javascript で実装する必要があるため、レンダラーは少し遅くなる可能性があります。

この場合、質問はより一般的になり、「ビットマップ上にさまざまな幅のベジエ曲線を描画する方法」と Javascript<canvas>はアルゴリズムの実装の 1 つにすぎません。

例：

glDrawArray() を使用して描画されたベジェ曲線のさまざまなポイントで幅をスムーズに変更する方法

また、Inkscape のようなオープン ソースの描画アプリケーションのソース コードを調べて、どのようにこれを行っているかを調べることもお勧めします。