canvasの使い方とサンプル

htmlで以下を用意

<canvas id="stage"></canvas>

canvasのデフォルトサイズは、幅300px、高さ150pxになっている。

jsでの使い方サンプル

  // canvasのオブジェクト取得
  var stage = document.getElementById('stage');
  var ctx = stage.getContext('2d');

矩形をかく

  // strokeStyle :線の色を指定
  // lineWidth   :線の太さを設定
  // fillStyle   :塗りの色を設定
  ctx.strokeStyle = 'blue';
  ctx.lineWidth = 10;
  ctx.fillStyle = 'green';

線をつける、色を塗る

  // strokeRect(x,y,w,h) :枠線
  // fillRect(x,y,w,h)   :塗りつぶし
  // clearRect(x,y,w,h)  :くり抜き（消しゴムみたいな）
  ctx.strokeRect(0, 0, 100, 100);
  ctx.fillRect(0, 0, 100, 100);
  ctx.clearRect(0, 0, 100, 100);

矩形以外をPathを使ってかく

  // 三角形の場合
  // 線を描くための点を用意して、線を引くイメージ？
  // beginPath  :現在のパスをリセット
  // moveTo     :始点に移動する
  // lineTo     :線を引くために座標を指定する
  // fill       :塗りつぶす
  // closePath  :線を繋げる？
  // stroke     :線をつける
  ctx.fillStyle = 'green';
  ctx.beginPath();
  ctx.moveTo(50, 50);
  ctx.lineTo(0, 100);
  ctx.lineTo(100, 100);
  ctx.fill();
  ctx.closePath();
  ctx.stroke();

円を描く

  // arc(x,y,r(半径),start(開始角),end(終了角))
  ctx.arc(100, 100, 20, 0, 2 * Math.PI); //半径20pxの円
  // 円弧(120
  ctx.arc(100, 100, 20, 0, 2 * Math.PI / 360 * 120);  // 半径20pxで0度から120度の円弧
  // 円弧の状態で、円の中心から塗りつぶしをしたい場合は、moveToを利用する
  // 中心の座標にmoveToしてから、arcで円を作成して、fillで塗りつぶす
  ctx.moveTo(100, 100);
  ctx.arc(100, 100, 20, 0, 2 * Math.PI / 360 * 120);
  ctx.fill();

グラデーション

  // 円のグラデーション
  // createRadialGradient(x0, y0, r0, x1, y1, r1)
  // x、y:座標  r:半径 0:一つ目の円 1:二つ目の円
  // x0 y0座標から広がるr0の半径の円から徐々に　 x1 y1座標から広がるr1半径に色を変えていくという意味
  var g = ctx.createRadialGradient(100, 100, 0, 100, 100, 20);
  g.addColorStop(0.0, 'red');
  g.addColorStop(0.5, 'orange');
  g.addColorStop(1.0, 'yellow');
  ctx.fillStyle = g;
  ctx.beginPath();
  ctx.arc(100, 100, 20, 0, 2 * Math.PI);
  ctx.fill();

移動、拡大、回転

  // translate  :移動
  // scale      :拡大
  // rotate     :回転
  ctx.translate(40,40);
  ctx.scale(2,2);
  ctx.rotate(Math.PI / 180 * 30);

影の設定

  // shadowColor   :影の色
  // shadowOffsetX :x座標へのずれ
  // shadowOffsetY :y座標へのずれ
  // shadowBlur    :ぼかし具合
  ctx.shadowColor = 'rgba(0,0,0,0.3)';
  ctx.shadowOffsetX = 5;
  ctx.shadowOffsetY = 5;
  ctx.shadowBlur = 5;

saveとrestore

  // save、restoreを活用することで、部分的に適用したいスタイルをスマートにかける
  // 例えば上の例で影をつける設定があるが、これを適用すると設定したいところ以外にも影が適用されてしまうことがある。
  // そんな時にsaveとrestoreを使うことで、部分的に影を適用できる
  ctx.save();  // この時点までの設定を保存する
  ctx.shadowColor = 'rgba(0,0,0,0.3)';
  ctx.shadowOffsetX = 5;
  ctx.shadowOffsetY = 5;
  ctx.shadowBlur = 5;
  ctx.fillStyle = 'black';
  ctx.fill();
  ctx.restore();  //saveされた時点の設定を有効にする（save後に適用した設定は破棄する）

連続して描画することで動いているように見せるように扱う。
パラパラ漫画的なイメージ。
ちなみにPathを使う場合、beginPathを書き忘れるとひどいことになる。
パスのリセットがされないので、lineToでどんどんパス増やしちゃうみたい。
10ミリ秒で描画するような処理で書き忘れるとどんどん遅くなっていくのがわかる。（実際に試してみたというか、これを書いているときにやってしまって五分くらい悩まされた。）