javascriptでcanvasに図形を描く

基本となるHTML：


<!DOCTYPE html>
<html>
  <head>
    <meta name="charset" content="UTF-8">
    <title>canvas</title>
  </head>
  <body>
    <canvas id="canvas1" width="100" height="100"></canvas>
    <script type="text/javascript" src="draw_figures.js"></script>
  </body>
</html>

以降、draw_figures.jsを変更していったと仮定する。

0. 座標系

原点は矩形の左上で、右方向がxの正方向、下方向がyの正方向になる。コンピュータの座標系としては一般的だと思われる（余談だけど、Mac OS XのCocoaは左下が原点なので上下が逆転していたりするので、若干面倒くさい）

0------ +x
|
|
+y

1. 矩形を塗りつぶす

var canvas = document.getElementById("canvas1");
if (canvas.getContext) {
  // 2D画像のコンテキストを取得
  var ctx = canvas.getContext("2d")

  // 塗りつぶしの色のRGB値を(100,100,100)（灰色）に指定
  ctx.fillStyle = "rgb(100,100,100)";

  // 原点(0,0)を基準として、そこから+x方向に10px、+y方向に20pxをとった矩形領域を塗りつぶす
  ctx.fillRect(0,0,10,20);
}

色の指定方法にはCSS3の色の指定方法がそのまま使える。

ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";  // アルファ値を1にセット（透過しない）

2. 直線を描く

var canvas = document.getElementById("canvas1");
if (canvas.getContext) {
  // 2D画像のコンテキストを取得
  var ctx = canvas.getContext("2d")

  // 直線を描画する際の色を指定
  ctx.strokeStyle = "rgb(100,0,0)";

  // パスの指定を開始
  ctx.beginPath();

  // (10,20) から(10,30)までパスを追加
  ctx.moveTo(10,20);
  ctx.lineTo(10,30);

  // (10,30)から(20,30)までパスを追加
  ctx.lineTo(20,30)

  // パスを直線で描画
  ctx.stroke();
}

moveToではパスの追加をせずに基準の点を移動するだけで、lineToでは直前の基準の点から指定された点までの間のパスを追加しつつ、基準の点を移動する。