支援対象地域:札幌、仙台、関東、愛知、関西、広島、福岡


1.HTML5のcanvasを使用する

canvasとは、HTML5から新しく追加される図形を描くための技術仕様で、HTMLの<canvas>要素とJavaScriptを組み合わせて図形を描画します。 HTML5につきましては対応ブラウザでないと使えないです。また、話としてはずれますが、以前Javaの開発を行った場合に画面側を別のところが作成することになり、事前にHTML5は対応していないので使わないで下さいと指摘はしたうえで依頼を出されたらしいですが、がっつり使われているのを渡されて対処したことを思い出しました…。 話を戻しますが、 <canvas>を使用することで、標準のHTMLとJavaScriptだけで、 グラフやゲームグラフィックスなどの図形をすばやく表示できるようになります。

canvasタグの指定は以下になります。
<canvas id="sample1" width="100" height="100">
※ここの文字が表示される場合、対応していません
</canvas>
このように指定することによって、idがsample1の100×100の大きさのcanvasが作成されます。 しかし、これだけでは図形は表示されません。このHTMLの部分とJavaScriptをID名で関連付けて、描く図形を指定します。JavaScriptの部分では、描く図形を指定する前に、まずキャンバスを使うための準備が必要です。

canvasとJavaScriptの記述例は以下になります。
<title>canvasの例</title>
<script type="text/javascript">
<!--
function fnRect() {
// 描画コンテキストの取得
var canvas = document.getElementById('sample1');
// 利用できない環境ではスクリプトを実行させないためにif文で囲む
if (canvas.getContext) {
var context = canvas.getContext('2d');
// ※以下に描画内容を指定する
// 左から10上から20の位置に、幅5高さ30の四角形を描く
context.fillRect(10,20,5,30);
// 色を指定する
context.strokeStyle = 'rgb(00,00,255)'; // 枠線の色は青
context.fill();
}
}
//-->
</script>
</head>
<body onLoad="fnRect()">
<canvas id="sample1" width="100" height="100">
※ここの文字が表示される場合、対応していません
</canvas>
</body>
</html>

上のcanvasとJavaScriptの記述例ではfillRectメソッドのみを使用していますが、fillRectを含むその他のメソッドの一部を以下に記述します。
・四角形を描画する場合、以下のメソッドを使用します。
fillRect(x, y, width, height)…塗りつぶされた矩形を描きます。
strokeRect(x, y, width, height)…矩形の輪郭を描きます。
clearRect(x, y, width, height)…指定された領域を消去し、完全な透明にします。
上の3つの関数は同じパラメータをとなります。xとyは四角形の左上の角のcanvas上での位置を指定します。widthとheightは四角形のサイズを指定します。
・三角形を描画する場合、四角形と異なり以下のメソッドを組み合わせて使用します。
beginPath()…新しいパスの開始、もしくは現在のパスをクリアする。
moveTo(x, y)…始点、もしくはパスを移動します。
lineTo(x, y)…線を描きます。
・円形を描画する場合、以下のメソッドを使用します。
arc(x, y, radius, startAngle, endAngle [, anticlockwise ] )…x,y)を中心の位置、radiusを半径、startAngleを開始角度、endAngleを終了角度、anticlockwiseを方向(デフォルトは時計回り)とする円弧を描きます。
arcTo(x1, y1, x2, y2, radius)…指定した制御点と半径によって円弧を描き、その前の描画位置と直線で接続します。

2.最後に

今回はJavaScriptを使用して単純に図形を描画することのみ記述しましたが、JavaScriptを駆使すれば色々なことができるようになります。その一つとしてJavaScriptをタイマーを使用したアニメーションなどが可能になりますので色々チャレンジしてみるのもいいかもしれません。