円形のグラデーションを付ける(createRadialGradient、addColorStop) [html5 の Canvas を使ってみる：第十八回]

createLinearGradient(); で線形グラデーションを塗ることをやったので、今回は円形のグラデーションを付けてみる。まずは、円の中を青と黒を使ってグラデーションを作ってみる。

★html 側

<canvas id="gradient"></canvas>

★Javascript 側

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

// 矩形を arc(); で描画
  c.beginPath();
  c.arc(50, 50, 50, 0, 2 * Math.PI, false);
// この円の中心である x:50、y:50 を中心にして、
// 半径が 0 の円と半径が 50 の円の間でグラデーションを指定
  g = c.createRadialGradient(50, 50, 0, 50, 50, 50);
// rgb で 0 の位置を青に指定
  g.addColorStop(0, "rgb(0, 0, 255)");
// rgb で最大の 1 の位置を黒に指定
  g.addColorStop(1, "rgb(0, 0, 0)");
// グラデーションを指定した g を fillStyle として塗りに指定
  c.fillStyle = g;
// 色塗りの指定
  c.fill();
}

すると、こうなる。


addColorStop(); の色指定を 16 進数にしてみる。

// 16 進数で 0 の位置を青に指定
  g.addColorStop(0, "#0000ff");
// 16 進数で最大の 1 の位置を黒に指定
  g.addColorStop(1, "#000000");

今までは createRadialGradient(); で指定する小さい方の円の半径が 0 だったが、これを半径 30 にしてみる。

  g = c.createRadialGradient(50, 50, 30, 50, 50, 50);

次に 3 色使ってみるために、青と黒の間に灰色を挟んでみる。addColorStop(); の第一引数を 0 と 1 の間で指定する。

// rgb で 0 の位置を青に指定
  g.addColorStop(0, "rgb(0, 0, 255)");
// rgb で 0.7 の位置を灰色に指定
  g.addColorStop(0.7, "rgb(200, 200, 200)");
// rgb で最大の 1 の位置を黒に指定
  g.addColorStop(1, "rgb(0, 0, 0)");

rgba で透明度を設定した値を addColorStop(); に入れ、青から透明になるようにしてみる。

// rgba で 0 の位置を青の透明化なしに指定
  g.addColorStop(0, "rgba(0, 0, 255, 1)");
// rgba で最大の 1 の位置を白の透明に指定
  g.addColorStop(1, "rgba(255, 255, 255, 0)");

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

W3C；
4.8.11 The canvas element — HTML 5