色で塗る(fillStyle) [html5 の Canvas を使ってみる：第七回]

描いた図形に色で塗りつぶしてみる。

色を塗ったときに判るように、図形を重ねて描いてみる。2 つの図形を判りやすいように、c1・c2 と便宜上分けた。

★html 側

<canvas id="fillStyle"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: fillStyle で 2 次元描画を行うことの定義（1 つめ）
  var c1 = document.getElementById("fillStyle").getContext('2d');

// 1 つめの三角形を lineTo(); と closePath(); で描画。
  c1.beginPath();
  c1.moveTo(0, 30);
  c1.lineTo(100, 60);
  c1.lineTo(20, 70);
  c1.closePath();
  c1.stroke();
// 色を rgb(255, 0, 0) の赤で指定
  c1.fillStyle = "rgb(255, 0, 0)";
// 色を塗る命令
  c1.fill();

// id: fillStyle で 2 次元描画を行うことの定義（2 つめ）
  var c2 = document.getElementById("fillStyle").getContext('2d');

// 2 つめの三角形を lineTo(); と closePath(); で描画。
  c2.beginPath();
  c2.moveTo(60, 0);
  c2.lineTo(70, 90);
  c2.lineTo(30, 100);
  c2.closePath();
  c2.stroke();
// 色を rgb(0, 0, 255) の青で指定
  c2.fillStyle = "rgb(0, 0, 255)";
// 色を塗る命令
  c2.fill();
}

すると、こうなる。


で、色の値は CSS のフォーマットで指定するので、rgba を用いて、半透明にすることもできる。

// c1 の fillStyle を rgba で色を 30% にする
  c1.fillStyle = "rgba(255, 0, 0, .3)";
// 同じように、c2 の fillStyle を rgba で 50% にする
  c2.fillStyle = "rgba(0, 0, 255, .5)";

transparent を指定すれば、透明になる。例えば、上に乗っかってる青い図形を透明にしてみる。

  c2.fillStyle = "transparent";

おなじみの 16 進数でも可能。

  c1.fillStyle = "#ff0000";
  c2.fillStyle = "#0000ff";

確認環境：
Safari 5.0、Firefox 3.6.3、Chrome 5.0.375.70、Opera 10.53

W3C；
4.8.11 The canvas element — HTML 5