始まる前に

今回は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

(Webゲーム開発)canvasの基本-(1)-canvas要素で図形を描く