透明度をまとめて指定する(globalAlpha) [html5 の Canvas を使ってみる：第十六回]

fillStyle で rgb を使えば透明化できるのは判ったけど、いくつか図形があり、まとめて同じ透明度を適用させてい場合があるかもしれない。そんな時は globalAlpha(); がいいみたい。

arc(); で描いた円を赤・青・緑に塗り、背景に rect(); で描いた灰色の矩形、透明化されているのが判りやすいように、lineTo(); で黒い線を描いてみる。

★html 側

<canvas id="globalAlpha"></canvas>

★Javascript 側

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

// 灰色の矩形を rect(); で描画
  c.beginPath();
  c.rect(0, 0, 100, 40);
  c.fillStyle = "rgb(200, 200, 200)";
  c.fill();
// lineTo(); で黒い線を描画
  c.beginPath();
  c.moveTo(0, 20);
  c.lineTo(100, 20);
  c.stroke();
// 透明度を 50% に指定
  globalAlpha = 0.5;
// arc(); で赤い円を描画
  c.beginPath();
  c.arc(20, 20, 10, 0, 2 * Math.PI, false);
  c.stroke();
  c.fillStyle = "rgb(255, 0, 0)";
  c.fill();
// arc(); で青い円を描画
  c.beginPath();
  c.arc(20, 20, 10, 0, 2 * Math.PI, false);
  c.stroke();
  c.fillStyle = "rgb(0, 0, 255)";
  c.fill();
// arc(); で緑の円を描画
  c.beginPath();
  c.arc(20, 20, 10, 0, 2 * Math.PI, false);
  c.stroke();
  c.fillStyle = "rgb(0, 255, 0)";
  c.fill();
}

すると、こうなる。


globalAlpha(); は、これが記述された以降に fill(); や stroke(); されている図形に対して有効なようなので、最初の灰色の矩形の前に globalAlpha(); を記述してみると、灰色の矩形も透明化される。


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

W3C；
4.8.11 The canvas element — HTML 5