canvasはHTML5で追加された要素で、線や矩形、円、画像などを描画します。
描画の手順
ある人が「雨だ」と叫んだら、おそらく「雨」を連想すると思います。
しかし、「このあめあげる」たったら、「飴」を連想すると思います。
御覧の通り、物事を判断するために必要な情報をコンテキスト（文脈、前後関係、背景）といいます。
canvasとまったく関係ないと思うかもしれませんが、canvasを習得する近道はコンテキストにあります。同じように筆を動かしても、コンテキストが違えば描かれる結果が異なってきます。
筆を持つ手を同じように動かして（同じような処理を行っても）、その時の絵の具や筆の状態によって描画される内容（色や太さ）が変わるのと同じです。
canvasに描画する際は以下の通りです。
- HTMLでcanvas要素を定義
- JavaScriptでcanvas要素を取得
- canvas要素からコンテキストを取得
- コンテキストに色や線の太さなどを設定
- コンテキストに対して線や矩形などの描画を行う
という手順になります。
以下はcanvasの使用例です。
使用例(ソースコード)
<!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要素を定義します。
<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軸となります。
