ゼロからわかる現代JavaScript

ここは、ふぇりあ１６歳が不定期に連載しているオンライン小説のページです。

VNIふぇりあ16歳へ

ゼロからわかる現代JavaScript

３９．ドット絵の描画。「canvas」

*最新のIE9が必要です。

今度は色(RGB)データから
ドット絵を描画してみます。

まず

・createImageData

createImageDataメソッドでimageDataオブジェクトを作ります。

引数は画像の(縦幅,　横幅)となります。

今回使用するソースコード

//配列の作成
var R = new Array();
var Y = new Array();
//配列に色(RGB)データを入力
R = [255, 0, 0, 255];
Y = [255, 255, 204, 255];

//ドット絵の大きさ
var W = 16;
var H = 16;

function main() {
　　//キャンバス要素の作成
　　var canvas = document.createElement("canvas");
　　//bodyに要素の追加
　　document.body.appendChild(canvas);

　　//コンテキストを取得 2dは2D描画の意味
　　var ctx = canvas.getContext("2d");

　　// ImageDataオブジェクトを作成
　　var imgData = ctx.createImageData(W, H);

　　//データ用の配列を作成
　　var data = new Array();

　　//１６×１６のデータを配列の連結で作る
　　data = data.concat(R, R, R, R, R, R, R, Y, Y, R, R, R, R, R, R, R,
　　　　　　　　　　　　　　R, R, R, R, R, R, R, Y, Y, R, R, R, R, R, R, R,
　　　　　　　　　　　　　　R, R, R, R, R, R, Y, Y, Y, Y, R, R, R, R, R, R,
　　　　　　　　　　　　　　R, R, R, R, R, R, Y, Y, Y, Y, R, R, R, R, R, R,
　　　　　　　　　　　　　　R, R, R, R, R, R, Y, Y, Y, Y, R, R, R, R, R, R,
　　　　　　　　　　　　　　R, R, R, R, R, Y, Y, Y, Y, Y, Y, R, R, R, R, R,
　　　　　　　　　　　　　　R, R, R, R, Y, Y, Y, Y, Y, Y, Y, Y, R, R, R, R,
　　　　　　　　　　　　　　R, R, R, Y, Y, Y, Y, Y, Y, Y, Y, Y, Y, R, R, R,
　　　　　　　　　　　　　　R, Y, Y, Y, Y, Y, Y, Y, Y, Y, Y, Y, Y, Y, Y, R,
　　　　　　　　　　　　　　R, Y, Y, Y, R, Y, Y, Y, Y, Y, Y, R, Y, Y, Y, R,
　　　　　　　　　　　　　　R, Y, Y, R, R, R, Y, Y, Y, Y, R, R, R, Y, Y, R,
　　　　　　　　　　　　　　R, Y, Y, Y, R, Y, Y, Y, Y, Y, Y, R, Y, Y, Y, R,
　　　　　　　　　　　　　　R, Y, Y, Y, Y, Y, Y, Y, Y, Y, Y, Y, Y, Y, Y, R,
　　　　　　　　　　　　　　R, Y, Y, Y, Y, Y, R, Y, Y, R, Y, Y, Y, Y, Y, R,
　　　　　　　　　　　　　　R, R, Y, Y, Y, Y, R, R, R, R, Y, Y, Y, Y, Y, R,
　　　　　　　　　　　　　　R, R, R, R, R, Y, Y, Y, Y, Y, Y, R, R, R, R, R);

　　//イメージデータにRGBの値を入れる
　　for (i = 0; i < 4 * W * H; i++) {
　　　　imgData.data[i] = data[i];
　　}

　　//イメージデータを出力
　　ctx.putImageData(imgData, 0, 0);
}

次にデータ用の配列を作成し、画像の大きさに応じて
配列で指定されたカラーデータをいれます。

・concat

このとき配列の連結をconcatメソッドで行っています。

そのため、一時配列に配列のカラーデータがすべて格納されます。

そしてimgDataオブジェクト（一時配列）にdataメソッドを使って

カラーデータの数(4)　×　横幅　×　縦幅

分のデータをいれます。

そして

・putImageData

putImageDataメソッドでイメージを出力します。

引数は(imageDataオブジェクト, Ｘ座標, Ｙ座標)となります。

実行結果

コラム：

ドット絵は、スライムとかホリンらしきもの？です。

この方法は入門者にはかなり難しいかもしれません。
分からなくても大丈夫だと思います。