Javascriptを久しぶりに触ってみました。 #JavaScript

html文書にJavaScriptを埋め込んで処理する時の記載方法を備忘で記載しておきます。

次に試したいのは、与えている変数をブラウザから取得する方法です。

test.html

<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>線</h1>
    <canvas id="line" width="100" height="100"></canvas>
    <h1>四角</h1>
    <canvas id="rectangle" width="100" height="100"></canvas>
    <h1>円</h1>
    <canvas id="circle" width="100" height="100"></canvas>
    <script type="text/javascript">
    //読み込み時に実行する
    onload = function() {
      /* 線を引く */
      var line_canvas = document.getElementById("line"); 
      var line_ctx = line_canvas.getContext("2d");
      line_ctx.beginPath();
      // 開始位置に移動する
      line_ctx.moveTo(20, 20);
      // 線を引く
      line_ctx.lineTo(80, 80);
      line_ctx.closePath();
      line_ctx.stroke();
      /* 四角を描く */
      var rect_canvas = document.getElementById("rectangle");
      var rect_ctx = rect_canvas.getContext("2d");
      rect_ctx.beginPath();
      // 四角を描く
      rect_ctx.strokeRect(20, 20, 60, 60);
      /* 色の付いた円を書く */
      var cir_canvas = document.getElementById("circle");
      var cir_ctx = cir_canvas.getContext("2d");
      // 塗りつぶす色を指定する
      cir_ctx.fillStyle = 'rgb(0, 255, 0)';
      cir_ctx.beginPath();
      // 円を描く位置を決める
      cir_ctx.arc(50, 50, 40, 0, Math.PI * 2, false);
      // 実際に円を書く
      cir_ctx.fill();
    }
    </script>
  </body>
</html>