canvasとは、Javascriptだけで画像を作成し表示できるHTML5の標準機能の一つです。多くのブラウザがその機能を標準装備しています。
ここでは、canvasの概念やピクセル情報など、最も基本的な事項を説明します。
実際の利用では、標準的な図形を描画する標準機能を利用することになりますが、それに関しては「CANVASの基本(2)」で扱います。
この直後に
<canvas id="canvas0" width="300" height="200"></canvas>
があります。
0 299
0┌────────────┐
│ │
│ │
│ │
│ │
199└────────────┘
右に(見えませんが)canvasがあります。body部で、任意の箇所に
<canvas id="canvas0" width="300" height="200"></canvas>
と記述することにより、その場所に名称が"canvas0"、幅(横方向)300ピクセル、高さ(縦方向)200ピクセルのcanvasスペースがとられます。
body部のcanvasをJavascriptに結び付けるには、Javascriptで次の記述をします。
var canvas = document.getElementById("canvas0"); ・・・ア
var ctx = canvas.getContext("2d"); ・・・イ
var ctxImage = ctx.createImageData(300, 200); ・・・ウ
var cw = ctxImage.width; ・・・エ cw = 300 でもよい
var ch = ctxImage.height; ・・・オ ch = 200 でもよい
var pixelData = ctxImage.data; ・・・カ
pixelDataは、仮想的には次のような3次元配列です。。
allayData[i][j][c]
i:縦方向、上端が0、下端が299(ch-1)
j:横方向 左端が0 右端が199(cw-1)
c:色 0=赤成分、1=緑成分、2=青成分、4=透明度
実際には pixelDataは1次元配列で、次のように格納されています。
for (i=0; i<ch; i++) {
for (j=0; j<cw; j++) {
for (c=0; c<=3; c++) {
k++;
pixelData[k] = allayData[i][j][c];
}
}
}
上端からi番目、左端からj番目のピクセルでは、
k = 4*(cw*i + j)
pixelData[k+0] ・・・赤成分
pixelData[k+1] ・・・緑成分
pixelData[k+2] ・・・青成分
pixelData[k+3] ・・・透明度
のように取り扱えます。
例えば、canvasの左上を黄色にする操作は次の通りです。
for (i=0; i<100; i++) {
for (j=0; j<150; j++) {
pixelData[k+0] = 255;
pixelData[k+1] = 255;
pixelData[k+2] = 0;
pixelData[k+3] = 255;
}
}
(canvasへの描画に関しては後述します)
既存のcanvasからピクセル情報を取得して、ピクセル単位で変更を行い、その結果をcanvasに上書きするJavascriptは、次のようになります。
var canvas = document.getElementById("canvas0"); ・・・ア
var ctx = canvas.getContext("2d"); ・・・イ
var ctxImage = ctx.getImageData(0, 0, 300, 200); ・・・キ
var pixelData = ctxImage.data; ・・・カ
:
:pixelDataの変更
:
ctxImage.data = pixelData; ・・・ク
ctx.putImageData(ctxImage, 0, 0); ・・・ケ