by shigemk2

当面は技術的なことしか書かない

画像を描画してみよう

HTML5 
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>hoge</title>
  </head>
  <body>
    <canvas id="e2" width="256" height="268"></canvas>
    <canvas id="e3" width="256" height="268"></canvas>
    <script>
      var canvas2 = document.getElementById("e2");
      var context2 = canvas2.getContext("2d");
      var fist2 = new Image();
      fist2.src = "./html5-fist.png";
      fist2.onload = function() {
        context2.drawImage(fist2, 0, 0);
      };
      var canvas = document.getElementById("e3");
      var context = canvas.getContext("2d");
      var fist = new Image();
      fist.src = "./html5-fist.png";
      fist.onload = function() {
        for (var x = 0, y = 0;
             x < 500 && y < 375;
	     x += 20, y += 27) {
        context.drawImage(fist, x, y, 50, 50);
	}
      };
    </script>
  </body>
</html>

普通にimgからでも使えるけど、Imageオブジェクトを生成して
canvasで描画することも可能である。

入門 HTML5

入門 HTML5