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

2013/08/28JavaScript

薄々気づいていたんだけど、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>

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