手順
以下の二つのファイル
- test.html
- test.js
を作成する
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>JavaScript Sample</title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<div id="test_canvas"></div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(){
main();
});
</script>
</body>
</html>>
test.js
var main = function() {
var targetDiv = document.getElementById('test_canvas');
if (targetDiv == null) {
return;
}
var canvas = document.createElement("canvas");
canvas.height = 500;
canvas.width = 500;
targetDiv.appendChild(canvas);
var ctx = canvas.getContext("2d");
ctx.fillRect(100, 100, 100, 100);
}
実行結果
説明
test.html
document.addEventListener('DOMContentLoaded', function(){
main();
});
addEventListenerでDOMContentLoadedを指定するとhtml読み込み完了後関数を実行できる
test.js
document.getElementById('test_canvas');
domからcanvas要素を配置する場所を取得
document.createElement("canvas");
domの要素とするcanvas要素を作成
targetDiv.appendChild(canvas);
dom内にcanvas要素を配置
var ctx = canvas.getContext("2d");
canvasの2d情報を取得
ctx.fillRect(100, 100, 100, 100);
塗りつぶした長方形を描画