スタートページJavascriptCANVAS

CANVASの基本(1)canvasの定義とピクセル情報

canvasとは、Javascriptだけで画像を作成し表示できるHTML5の標準機能の一つです。多くのブラウザがその機能を標準装備しています。

ここでは、canvasの概念やピクセル情報など、最も基本的な事項を説明します。
 実際の利用では、標準的な図形を描画する標準機能を利用することになりますが、それに関しては「CANVASの基本(2)」で扱います。


この直後に
<canvas id="canvas0" width="300" height="200"></canvas>
があります。

   0           299
  0┌────────────┐
   │            │
   │            │
   │            │
   │            │
199└────────────┘

canvasの操作

実験

説明

canvasの定義と描画

右に(見えませんが)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からピクセル情報を取得して、ピクセル単位で変更を行い、その結果を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);          ・・・ケ