Canvas

canvasとは

次世代のhtmlとして策定が進んでいるhtml5の仕様の中にある要素で、javascriptにより、直接画像を作る仕組みです。次世代のブラウザでの標準ですが、firefoxで既に使える他、Safari, Operaなどでも使用可能です。インターネットエクスプローラでも「ExplorerCanvas」というライブラリを導入することで使えます。

本来はhtml5のDOCTYPE宣言の書き方があり、それ以前のhtml4やxhtml1.1ではcanvasは不正な要素、あるはずのない要素になってしまいますが、ここは「おためし」ということでxhtml1.1の環境で無理矢理書いてしまいます。

body内の記述

<canvas id="graph" width="450" height="300"></canvas>

枠線をいれるためにスタイルシートをつかっています(後述)。

width="450" height="300" と指定したcanvasの中は次のような座標を持っています。この座標を使って図形を描きます。

スタイルの記述(head内)

marginの設定と、border(枠線)をいれるためにはスタイルシートをつかいます。必ず入れなければならないということはありません。必要に応じて指定します。

<style type="text/css">
canvas {
  border:solid 1px #999999; 
  margin:1% 2%;
}
</style>

javascriptの記述(head内)

図を描くにはjavascriptに記述します。//以下は注釈でプログラム実行では無視されます。

<script type="text/javascript">
// 描画プログラム
function draw() {
  var canvas1 = document.getElementById('graph');
  var ctx = canvas1.getContext('2d');
  // □■
  ctx.strokeRect(20, 20, 200, 40);
  ctx.fillRect(20, 120, 200, 40);
  // ○
  ctx.beginPath();
  ctx.arc(300, 50, 40, 0, Math.PI*2, false); /*anticlockwise=false*/
  ctx.stroke();
  //.....以下略...
 }

// ページの表示が終わったら(onload)draw()を実行するため
onload = function() {
  draw();
};
</script>

これで以下のようにcanvasに図が描かれます。

function

functionとは機能や関数の意味があります。プログラムではある機能を実現するための一連の命令の集まりをいいます。またこの機能がある結果を値として返す場合に関数と呼ぶこともあります。

functionの後ろには名前がきます。機能をこの名前で呼び出すことが出きるようになります。名前は英字ではじまる英数字の組み合わせで、どんな機能をもつかを表すものにします。

その後の{ }の中には実行したいことを書いていきます。

// 描画プログラム
function draw() {
    //ここにdraw()の内容(プログラム)を書く
}

名前は自分で決められます。複数あってもかまいません。

function draw1() {
    //ここにdraw1()の内容(プログラム)を書く
}
function draw2() {
    //ここにdraw2()の内容(プログラム)を書く
}

onload

実行のタイミングです。onload = function() は決まり文句です。このfunction()は上記のfunctionとは異なります。その後の{ }の中には実行したい function の名前を書きます。ここでは draw() しかありません。

// ページの表示が終わったら(onload)draw()を実行するため
onload = function() {
  draw();
};

もしdraw1()とdraw2()というfunftionがあって両方やらせたい時は、

onload = function() {
  draw1();
  draw2();
}

と書きます。

bodyタグの中に次のように書くやり方もありますが、onload = function() がお勧めです。

お勧めしないが別のやり方
<body onload="draw();">

canvasの為の決まり文句

  var canvas1 = document.getElementById('graph');
  var ctx = canvas1.getContext('2d');

  ctx.strokeRect(......

var の後の canvas1 と ctx は変数です。自分で名前を決めることができます。canvas1 はここの2つがあっていなければなりません。ctx はここでは Context の省略からこの名前にしました。ctxはこのあと、何度も使っていきます。

'graph' はキャンバスに付けた id です。

1行目で graph という id の canvas 要素を見つけてそれを canvas1 と呼ぶことにします。

2行目で、その canvas1 を '2D' (2次元平面の画像)として取り扱うこととし、その対象を ctx と呼ぶことにします。

2Dは決まり文句です。これ以外を指定できません。将来的には3Dというのもできるようになる可能性はあります。

canvas1 と ctx の名前は自由なのでこのようにしてもかまいません

  var canv = document.getElementById('graph');
  var g = canv.getContext('2d');

  g.strokeRect(......

この後は具体的な描画

次のページから少しずつ解説します。

  // □■
  ctx.strokeRect(20, 20, 200, 40);
  ctx.fillRect(20, 120, 200, 40);
  // ○
  ctx.beginPath();
  ctx.arc(300, 50, 40, 0, Math.PI*2, false); /*anticlockwise=false*/
  ctx.stroke();
  //.....以下略...

ウェブページ(Nov.2009)
聖愛中学高等学校
http://www.seiai.ed.jp/
Jan.2009 初稿