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

fillStyle で色を塗ることをやったので、今回はグラデーションを付けてみる。まずは、矩形の中を青と黒を使ってグラデーションを作ってみる。

★html 側

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

★Javascript 側

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

// 矩形を rect(); で描画
  c.beginPath();
  c.rect(10, 10, 100, 50);
// グラデーションの方向を x:10、y:10 から
// x:100、y:10 の水平方向で指定
  g = c.createLinearGradient(10, 10, 100, 10);
// 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();
}

すると、こうなる。


次に 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)");

今度は垂直方向のグラデーションにしてみる。createLinearGradient(); の座標を垂直にすればいいだけ。

// グラデーションの方向を x:10、y:10 から
// x:10、y:50 の垂直方向で指定
  g = c.createLinearGradient(10, 10, 10, 50);
// rgb で 0 の位置を青に指定
  g.addColorStop(0, "rgb(0, 0, 255)");
// rgb で最大の 1 の位置を黒に指定
  g.addColorStop(1, "rgb(0, 0, 0)");

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

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

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

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

最後に斜め方向のグラデーションにしてみる。これも createLinearGradient(); の座標を変更する。

// グラデーションの方向を x:10、y:10 から
// x:110、y:60 の斜め方向で指定
  g = c.createLinearGradient(10, 10, 110, 60);
// 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)");

どうも長方形では斜めのラインが対角線と等しくはならないみたい。こりゃ注意しないと。。。

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

W3C；
4.8.11 The canvas element — HTML 5