17/07/15

Canvasでパーティクル文字を作成してみる


 

今回はcanvasで大量のパーティクルを利用してドット文字のように
表示したいと思います。
また後半はアニメーションを実装しました。
描画には6文字しか対応していません。

 

パーティクル文字を作成

 

See the Pen JJzyba by youya66 (@youya66) on CodePen.0

 

やり方をざっと説明すると、

  • temp canvasをCreateElementで作成。
  • temp canvasに文字を描画
  • temp canvasのピクセルデータをgetImageDataで取得
  • getImageDateのピクセルデータ(a:Alpha)を見て色がついていればパーティクルを作成
  • canvasにパーティクルを描画

このような形になります。

アニメーションを追加

 

See the Pen vZPJjY by youya66 (@youya66) on CodePen.0

 

参考記事
パーティクル文字 – jsdo.it – Share JavaScript, HTML5 and CSS

以上です。

スポンサーリンク

メールアドレスが公開されることはありません。

youya66

だらけとびびり、それとちょっぴりのてきとーさ。

コアラになってだらだらしながら愛されたい。