canvasでテキストをパーティクルにする方法
http://jsdo.it/k.tanaka/YrLO
これがすごかった。
どうやっているのか気になったので、他にもいろいろ参考にして自分なりに作り直してみた。
結果がこれ
See the Pen particleTxt by 坂本龍太 (@sakamoto-ryouta) on CodePen.
パーティクルであってるのかな？
とりあえず、テキストをドットにするのはできた。
簡単な処理の流れ。
- キャンバスを黒く塗りつぶす
- 白いテキストを書く
- canvas全体のピクセルの色を取得
- ピクセルが白いところがテキストがあるピクセルなので、その位置を取得
- キャンバスを好きな色で塗りつぶして、テキストを消す
- テキストがあった位置にドットを置いていく
以上です。
canvasのピクセルの色を調べれるのは驚きでした。
調べるだけじゃなくて、上書きもできます。
https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/getImageData
canvasすごい