始まる前に
今回はHTML5のcanvasを使って簡単な図形を描いてみたいと思います。
描画する図形
ソースコード
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
var ctx;
function init() {
var canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
//コンテキストの設定
ctx.strokeStyle = "#FF0000";
ctx.fillStyle = "#00FF00";
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.shadowColor = "#000000";
ctx.shadowBlur = 20;
//線を引く
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(180, 250);
ctx.stroke();
//矩形を塗りつぶす
ctx.fillRect(300, 100, 100, 150);
//矩形を描く
ctx.strokeRect(500, 100, 100, 150);
}
</script>
</head>
<body onload="init()">
<canvas id="canvas" width="700" height="400"></canvas>
</body>
</html>
描画の手順
- HTMLでcanvas要素を定義
- JavaScriptでcanvas要素を取得
- canvas要素からコンテキストを取得
- コンテキストに色や線の太さなどを設定
- コンテキストに対して線や矩形などの描画を行う
ソースの説明
HTMLではcanvas要素を定義します。
<canvas id="canvas" width="700" height="400"></canvas>
ここで注意してほしいのは幅をwidth属性で,高さをheight属性で指定することです。
この指定が正しくなされてないと意図した大きさで描画されないこともありますので注意が必要です。
JavaScriptでは8列の
var canvas = document.getElementById("canvas");
でcanvasへの参照を取得し、次に9列の
ctx = canvas.getContext("2d");
でコンテキストを取得します。このctxが絵筆などの情報を格納するオブジェクトとなります。
多くのプログラムでは、コンテキストをctxやcontextといった広域変数に格納するのが主流です。
引数に「2d」とありますが、現在のHTML5では「2d」しか指定出来ません。
コンテキストを取得したらプロパティ（絵筆の属性）を設定します。（列11-17）
主なプロパティは以下の通りです。
| プロパティ | 内容 |
|---|---|
| ctx.strokeStyle | 線や輪郭の色 |
| ctx.fillStyle | 塗りつぶしの色 |
| ctx.lineWidth | 線の幅 |
| ctx.lineCap | 線の終端の形状で、butt、round、squreの値が使用される |
| ctx.shadowColor | 現状の影の色 |
| ctx.shadowBlur | 影に適用するぼかす範囲 |
コンテキストにプロパティを設定した後、線、矩形の塗りつぶし、矩形を描画しています。
描画する際に筆を動かすようにcanvasでは必ず「パス」と呼ばれる軌跡を設定します。
そのパスを初期化するのが「beginPath()」です。
「moveTo()」で筆を下ろし、「lineTo()」で筆を動かします。
その後、「stroke()」で初めて線が描画されます。
ちなみに、「fill()」では「パス」で囲まれた範囲が塗りつぶされます。
「fillRect()」と「strokeRect()」は名前から予想できると思いますが、塗りつぶした矩形の描画をしてくれます。
座標系はマウスイベントと同じく、canvasの左上を原点(0,0)、右方向にx軸、下方向にy軸となります。
引用 : Dripcoke