07. canvas(直線)

最近のWebブラウザは、HTMLのcanvasというものをサポートしています。
ブラウザ上に線を引いたり、円を描いたりと、自由に図を描くことができる機能です。
手はじめにcanvasに直線を描いてみましょう。
はじめは意味が分からなくても『習うより慣れろ』の精神で、とにかくテキストエディタで以下を打ち込んで、体で覚えてください。

リスト7: lesson07.html

<!DOCTYPE html>
<html>
  <head>
    <title>Lesson07</title>
  </head>
  <body>
    <canvas id="myCanvas" width="400px" height="300px"></canvas>
    <script>
      let canvas = document.getElementById("myCanvas");
      let context = canvas.getContext("2d");
      context.moveTo(  0,   0);
      context.lineTo(400, 300);
      context.stroke();
    </script>
  </body>
</html>

保存したファイルをWebブラウザで開くと、Webブラウザ上に直線が描画されます。

<canvas>要素で、幅400 pixel×高さ300 pixelの描画領域を定義しています。
JavaScript側からcanvas要素の描画コンテキストに、(0, 0)→(400, 300)まで直線を引く命令を出しています。