HTML5で四角を描く

   

【canvas】HTML5で絵を描くを参考にhtml5で四角をかくときのメモ!

四角をかく

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>canvas sample</title>
    <script>
      onload = function(){
        var canvas = document.getElementById('sample');
        var context = canvas.getContext('2d');
        context.beginPath();
        context.moveTo(50,50);
        context.lineTo(150,50);
        context.lineTo(150,150);
        context.lineTo(50,150);
        context.closePath();
        context.stroke();
      }
    </script>
  </head>
  <body>
    <h1>canvas sample</h1>
    <canvas id="sample"></canvas>
  </body>
</html>

html5ですよーってことで<!DOCTYPE html>
getElementByIdのところのsampleはcanvasのID。

Canvas要素のノードオブジェクトを取得して、getContext()メソッドでCanvasへアクセスするためのオブジェクトを取得します。
ここでは、getContext()メソッドの引数は2dを使います。

ここの解釈まだちょっと噛み砕けてません・・・

線をかくための処理をする

/* 1.線を書くよ!と宣言 */
context.beginPath();
/* 2.線を書き始める座標へ移動 */
context.moveTo(50,50);
/* 3.引きたい線の終端へ移動 */
context.lineTo(150,50);
/* 4.3の繰り返し */
context.lineTo(150,150);
context.lineTo(50,150);
context.closePath();
/* 5.実際に線を引く */
context.stroke();

おおおお!!!四角できた!すごい!!

 - (X)HTML