JavaScriptでCanvasに描画する

手順

以下の二つのファイル

  • 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);

塗りつぶした長方形を描画

シェアする

  • このエントリーをはてなブックマークに追加

フォローする