<!DOCTYPE html>
<html><head><title>HTML5でCanvasを使う</title>
<script>
(function() {
window.onload = function() {
var canvas = document.getElementById("canvas");
canvas.width = 500;
canvas.height = 500;
var ctx = canvas.getContext("2d");
var n = 16;
var i = 0;
var j = 1;
var r = Math.min(canvas.width, canvas.height) / 2;
var color = "rgb(0,0,0)";
var random = function(max) {
return Math.floor(Math.random() * max);
};
(function drawLine() {
ctx.beginPath();
var x1 = Math.cos(i / n * Math.PI * 2 + Math.PI / 2) * r + r;
var y1 = -Math.sin(i / n * Math.PI * 2 + Math.PI / 2) * r + r;
ctx.moveTo(x1, y1);
var x2 = Math.cos(j / n * Math.PI * 2 + Math.PI / 2) * r + r;
var y2 = -Math.sin(j / n * Math.PI * 2 + Math.PI / 2) * r + r;
ctx.lineTo(x2, y2);
ctx.strokeStyle = color;
ctx.closePath();
ctx.stroke();
j++;
if(j >= n) {
i++;
if(i >= n - 1) {
color = "rgb(" + random(256) + "," + random(256)
+ "," + random(256) + ")";
i = 0;
}
j = i + 1;
}
setTimeout(drawLine, 20);
})();
};
})();</script></head>
<body><canvas id="canvas" /></body></html>
ただひたすら線を描き続ける、とても簡単なサンプルプログラムです。要点を以下にまとめます。
- 1行目のDOCTYPEは、これだけでhtml5を指定出来ています。歴史的事情により大文字で書きます。
- canvasを使うには、<canvas>タグを用意します。普通のHTMLのタグなので、
document.createElement("canvas");
で作ってもかまいません。</li>
- 6行目から8行目で、JavaScriptでcanvas要素を取得して大きさを指定しています。
- Canvasタグに描画を行うには、コンテキストを取得してそこに書き込む必要があります。10行目がその部分で、これで準備は完了です。
- 12行目～29行目では、drawLine関数で使用する変数や関数を定義しています。関数が実行されるたびに初期化されないように外で宣言します。
- 21行目～31行目で、実際に描画しています。コンテキストに対してbeginPath、moveTo、lineTo、(closePath)、strokeStyle、で描画する領域を指定し、strokeで実際の線を引きます。
- 32行目～41行目で、次に引く線のために変数を変化させておき、42行目で50ミリセカンド後に自分自身を呼び出します。 </ul>
実行結果はこちらです。