〜canvasアナログ描画入門〜
ここではgetImageData()で得たImageの.dataをいじっていろいろ描画します
背景が白のテキストエリアのコードは改編して結果を見れます
〜注意!〜
※普通にcanvasの基本機能を使ったほうがはるかに速くて便利です。
どうしてもこの方法が必要な人以外はすみやかにお帰りください。
※コードは無駄があったり間違ってたりしますのでご了承ください。
※図でcanvasを使っています。IE9以上が必要です。無い人はchromeかfirefoxをダウンロードすれば見れます(無料)
※一度作った関数は使いまわしてるので順番に見てかないとわけわかんないかもです
※製作者も数式を完全には理解していません。「こうすれば何故かこう動いてくれる」程度の参考にしてください。
〜目次〜
クリックでとびます
はじめに
canvas,ctxは配列にしています
番号は作った順なのでバラバラです
立ち上げが遅くなるので図は最初から表示されてはいません。
超基本
.dataは1ピクセルにつき4つのバイトデータをもつ一次元配列です。
赤、緑、青、透過度の順です。4つ目は複数のcanvasを重ねて使わない限り無意味です。
普通の配列で使えるメソッドはブラウザの種類やバージョンによって使えたり使えなかったりします
0〜255の整数値しか入れてはダメです。
lenghを超えていじると遅くなります
中心座標(tx,ty)と半径(han)を決め、forで縦横にすべてのピクセルを見て中心からの距離が半径以内なら色をつけます。
中心からの距離の出し方は (中心からのx座標の二乗+中心からのy座標の二乗)の0.5乗です。
↓ここのen0への引数の値を適当に変えてスタートを押してみてね
function en0(ime,tx,ty,han,c1,c2,c3)