08. canvas(長方形)

07. canvas(直線)では、HTML Canvasに直線を引いてみました。
今回は長方形を描いてみましょう。
せっかくですので、長方形に色も付けてみたいと思います。
以下をテキストエディタで打ち込んでください。

リスト8: lesson08.html

<!DOCTYPE html>
<html>
  <head>
    <title>Lesson08</title>
  </head>
  <body>
    <canvas id="myCanvas" width="300px" height="200px"></canvas>
    <script>
      let canvas = document.getElementById("myCanvas");
      let context = canvas.getContext("2d");
      // Blue
      context.fillStyle = "#0055A4";
      context.fillRect(0,   0, 100, 200);
      // White
      context.fillStyle = "#FFFFFF";
      context.fillRect(100, 0, 200, 200);
      // Red
      context.fillStyle = "#EF4135";
      context.fillRect(200, 0, 300, 200);
    </script>
  </body>
</html>

保存したファイルをWebブラウザから開いてみてください。
フランスの国旗Tricolour（トリコロール）が描けました。

fillStyleで色を指定しています。#の後ろに続く6桁の英数字は、光の三原色RGB （Red, Green, Blue） の順に、それぞれ16進数 2桁(256階調）で表されています。
16進数というのは、いつか改めて説明しますが、1桁が0～9、A～Fの計16個の『数字』で表現される数値です。