javascript - html5キャンバスのshadowBlurの幅を設定するには?

Question

html5 キャンバスのコンテキストには、影の設定に関連する次の属性があります。

shadowOffsetX = float
shadowOffsetY = float
shadowBlur = float
shadowColor = color

影の幅を設定するものはありません。キャンバスで幅を設定することはまったく可能ですか?

shadowBlur は幅を広げているように見えますが、ぼかしはより不透明になります。

Answer 1

shadowBlur の値を高くすると、影の幅が広がりますが、残念ながら強度も低下するため、非常に高い値を指定するとほとんど見えないほどのぼかしが作成されます。

影の強度を上げる唯一の方法は、オブジェクトを複数回描画することです。ただし、これは、オブジェクト自体がアルファ透過であり、パフォーマンス フックにもなり得る場合に、望ましくない結果につながる可能性があります。これは、すでにかなり高価なぼかし効果をパスごとに再計算する必要があるためです。ぼかし効果のあるオブジェクトを別の非表示のキャンバスに描画し、このキャンバスを実際のキャンバスに複数回描画することで、パフォーマンス コストを少し削減できます。残念ながら、それはまだ汚いハックです。

非常に派手なグラフィック効果を作成したい場合は、WebGL の使用を検討する必要があります。学習曲線はかなり険しいですが、コツをつかめば、OpenGL シェーディング言語の全機能を自由に使用できます (完全な機能ではありません- バージョン 1.00 のみ - しかし、それは多くの優れた機能にはすでに十分です)。ユーザーの GPU で直接計算されるグラフィック効果)。