JavaScriptメモ canvasタグを使って四角形を描いてみる

JavaScript

薄々気づいていたんだけど、HTML5になってからJavaScriptって進化した？

htmlページはこんな感じ。

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript">
            // 四角形を描く
            function draw() {
                // canvas要素を取得する
                var canvas = document.getElementById('draw');
                if(!canvas.getContext) {
                    // 取得できなかった場合は終了する
                    return;
                }
                // 2D用の描画コンテキストを取得する
                var context = canvas.getContext('2d');
                if(!context) {
                    // 取得できなかった場合は終了する
                    return;
                }
                // 桃色に塗りつぶすように色を設定する
                context.fillStyle = 'rgb(255,155,255)';
                // 四角形を描く
                context.fillRect(10,10,90,90);
            }
        </script>
    </head>
    <body onload="draw()">
        <canvas id="draw"></canvas>
    </body>
</html>

ポイントはこんな感じだと思う。

  1. <canvas>タグを書いておいて、描画領域設定しておく
  2. 以下JavaScriptの記述
  • fillRect()メソッドを使って図形を描く
  • getElementById()メソッドを使って、canvasタグを取得する
  • getContext()メソッドを使って、描画するためのコンテキストと呼ばれるオブジェクトを取得する
  • fillStyleプロパティを使って、四角を塗りつぶす色を設定する
  • fillRect()メソッドを使って図形を描く

で、実行してみるとこんな感じ。

17689_01

そいや、こういう描画のコーディングって久しくしてないな…Objective-CとかVisual C++のMFCを使ったときくらいか？

まま、メモってことで。