HTML5 Canvas と JavaScript を使って作る追尾サンプル 00 – HTML, Canvas をセットアップ
最初は 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軸上の値, 幅, 高さ);
次回はループ処理の作成を行います.
[…] 00 – HTML, Canvas をセットアップ […]