HTML5 Canvas と JavaScript を使って作る追尾サンプル 00 – HTML, Canvas をセットアップ

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

最初は html 関連のセットアップを行います.

SAMPLE

今回制作するサンプルはこちら.

VIDEO

チュートリアルムービー

CODE

今回制作した, 今後ベースとなるコードです.

<!DOCTYPE html>

<html>
    
    <head>
        
        <meta charset=UTF-8 />
        <title>HTML5 Canvas と JavaScript を使って作る追尾サンプル</title>
        
        <!-- util系 -->
        <script>
            var $id = function(id) { return document.getElementById(id); }
        </script>
        
        <!-- application系 -->
        <script>
            
            window.onload = function()
            {
                var canvas = $id("c");
                var context = canvas.getContext("2d");
                
                context.fillRect(0, 0, 640, 480);
            };
            
        </script>
        
    </head>
    <body>
        <header>
            <h1>HTML5 Canvas と JavaScript を使って作る追尾サンプル</h1>
            <p>
                HTML, Canvas をセットアップ
            </p>
        </header>
        <canvas id="c" width="640" height="480"></canvas>
    </body>
    
</html>

TIPS

idの一致する要素を取得する

document.getElementById(id) でidが一致する要素を取得することができます.

よく使う割には命令が長いので下記のようにラップして省略できるようにすることをオススメします.

var $id = function(id) { return document.getElementById(id); };

context を取得

canvas への描画は context を介して行います. context は canvas の getContext("2d") で取得できます.

cnavas を矩形で塗りつぶす

context のメソッド fillRect で矩形で塗りつぶすことができます.

context.fillRect(x軸上の値, y軸上の値, 幅, 高さ);

次回はループ処理の作成を行います.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT