09. canvas(円)

前回はCanvasに長方形を描画してみました。
今回はCanvasに円を描いてみましょう。
それでは、テキストエディタで以下を打ち込んでください。

リスト9: lesson09.html

<!DOCTYPE html>
<html>
  <head>
    <title>Lesson09</title>
  </head>
  <body>
    <canvas id="myCanvas" width="300px" height="200px"></canvas>
    <script>
      let canvas = document.getElementById("myCanvas");
      let context = canvas.getContext("2d");
      let width  = canvas.width;
      let height = canvas.height;

      // Rectangle
      context.beginPath();
      context.strokeStyle="gray";
      context.rect(0, 0, width, height);
      context.stroke();

      // Circle
      context.beginPath();
      context.arc(width / 2, height / 2, height * 3 /10, 0, Math.PI * 2, true);
      context.fillStyle = "#ed2939";
      context.fill();
    </script>
  </body>
</html>

保存したファイルをWebブラウザで開くと、日本の国旗が表示されます。

【解説】

canvas要素から描画コンテキスト取得するまでは前回と同様ですね。
今回は、canvas要素のwidth属性とheight属性を取ってきて、その値をベースに描画しますので、HTMLの<canvas>タグの大きさを変えても、 それに合わせて描画する大きさも変わるように計算を行っています。

円を描く関数は、以下の書式です。

arc(x, y, radius, startAngle, endAngle, anticlockwise)

引数	解説
x,y	円の中心座標
radius	円の半径
startAngle	開始角度
endAngle	終了角度
anticlockwise	反時計回りかどうか

開始角度、終了角度は生活で馴染みがある °（degree; 度）の単位ではなくて、ラジアン(radian)という単位を使います。 1ラジアンの定義は『円の半径に等しい長さの弧の中心に対する角度』です。 難しければ、180°=π[rad] (3.14159・・・)　、360°=2π[rad]ということを覚えておいてください。 上記の例では、終了角度が Math.PI * 2 なので、0°～360°の円弧を描きます。 弧を描く場合はarc()関数を呼び出した後に、stroke()関数を、中を塗りつぶす場合はfill()関数を呼び出してください。