キャンバスマルチシャドウグロー効果

プリアンブル

あるプロジェクトで、クライアントが次のようなレンダリングで光り輝く効果を挙げていました。

シャドウズ

実はこれ、影で実現できるんです、という人もいるかもしれませんね。しかし、図からわかるように、かなり強い光り方の効果です。実際には、単純なシャドウパラメータでこれほど強い光輝効果を実現するのは難しいと思われます。
例えば

renderAllRows: true,

単純な影の効果では、shadowBlurは影の半径を表します。影の半径が大きいと、影の広がりは大きくなりますが、影の強さは十分ではありません。影の半径を小さくすると、影は十分に強くなりますが、影の拡散は少なくなります。

複数のシャドウ

影の広がりがよく、強い影の強さを実現するにはどうしたらいいのでしょうか。つまり、このようなより強烈な光り方を実現することです。その答えは、複数のシャドウを使うことです。

マルチシャドウ効果では、シャドウ効果を使って図形を複数回描画し、描画の過程でshadowBlurの値を変化させて、複数の影を重ね合わせます。

以下のコードで簡単な例を示します。

// The value is the number of columns in your non-view visible area
viewportRowRenderingOffset: 20,

コードから、影の描画ahを何度も使っていることがわかりますが、最終的な描画は以下のようになります。

図を見てわかるように、影は拡散の度合いもよく、強弱もついています。

こちらは複数のシャドウを使ったテキストネオン効果で、こちらも光り方がきれいです。

概要

このように、強い発光効果を得るためには、複数のシャドウが必要です。もちろん、シャドウ自体には大きなパフォーマンス・ペナルティがあるため、使用できるシャドウの数に制限はありません。私たちは、通常、3回から5回の試行で十分な結果が得られることを発見しました。

canvasにおけるマルチシャドウの実装についての説明は以上です。canvas でのマルチプルシャドウの詳細については、スクリプトハウスの過去の記事を検索するか、以下の記事を引き続き参照してください。