(X)HTML

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を使います。

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

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

/* １．線を書くよ！と宣言 */
context.beginPath();
/* ２．線を書き始める座標へ移動 */
context.moveTo(50,50);
/* ３．引きたい線の終端へ移動 */
context.lineTo(150,50);
/* ４．３の繰り返し */
context.lineTo(150,150);
context.lineTo(50,150);
context.closePath();
/* ５．実際に線を引く */
context.stroke();

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

  • この記事を書いた人

ゆず

■忘れないように自分の覚書と、誰かも困っているかもしれないので参考になればいいなくらいの軽い備忘録です。
■サイト運営費のためGoogleAdsenseをいれています。
giftee / ko-fi / mail

-(X)HTML
-