Lesson07: Canvas(直線)

このサイトは移転しました。1秒後に自動でジャンプします。
移動しない場合は、ここをクリックしてください。

---

最近の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>
        var canvas = document.getElementById("myCanvas");
        var 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)まで直線を引く命令を出しています。