Canvas での色とグラデーションの扱い方

オライリーから出ている「HTML5 Canvas」読んでる。

線形グラデーション

線形グラデーションは createLinearGradient() メソッドを使って描画される。引数ではグラデーションの開始点（x, y）と終了点（x2, y2）を指定する。

createLinearGradient(x, y, x2, y2);

y, y2 の値を両方 0 にすると水平方向のグラデーション、x, x2 を両方 0 にすると垂直方向のグラデーションになる。

// 水平方向
createLinearGradient(0, 0, 100, 0);

// 垂直方向
createLinearGradient(0, 0, 0, 100);

// 垂直方向
createLinearGradient(0, 0, 100, 100);

addColorStop を使用することで、グラデーションの色の変化を制御することができる。

グラデーションの開始点から終了点を 0 ~ 1.0 で表し、最初の引数でどの地点に色を挟むか指定する。第二引数では適用したい色を指定する。

addColorStop(stop, color);

Demo: http://jsfiddle.net/thleap/qk1zs3ra/1/

function drawScreen() {
  var gr = context.createLinearGradient(0, 0, 100, 0);

  gr.addColorStop(0, 'red');
  gr.addColorStop(.5, 'yellow');
  gr.addColorStop(1, 'red');

  context.fillStyle = gr;
  context.fillRect(0, 0, 100, 100);
}

また、一度グラデーションを設定した後は新たな色の指定をしない限り、後に続く他の図形にもグラデーションが適用されることを注意しておきたい。

グラデーションの範囲を超える部分については最後の色（ここでは赤）で塗りつぶされることになる。

Demo: http://jsfiddle.net/thleap/qk1zs3ra/2/

  function drawScreen() {
    var gr = context.createLinearGradient(0, 0, 100, 0);

    gr.addColorStop(0, 'red');
    gr.addColorStop(.5, 'yellow');
    gr.addColorStop(1, 'red');

    context.fillStyle = gr;
    context.fillRect(0, 0, 100, 100);
    context.fillRect(0, 100, 50, 100);
    context.fillRect(0, 200, 200, 100);
  }

輪郭（線）へのグラデーションの適用

グラデーションは図形の輪郭や線にも適用することができる。

Demo: http://jsfiddle.net/thleap/qk1zs3ra/3/

  function drawScreen() {
    var gr = context.createLinearGradient(0, 0, 100, 0);

    gr.addColorStop(0, 'red');
    gr.addColorStop(.5, 'yellow');
    gr.addColorStop(1, 'red');

    context.strokeStyle = gr;
    context.strokeRect(0, 0, 100, 100);
    context.strokeRect(0, 100, 50, 100);
    context.strokeRect(0, 200, 200, 100);
  }

複合図形（パスでの描写）にも適用できる。

Demo: http://jsfiddle.net/thleap/qk1zs3ra/4/

  function drawScreen() {
    var gr = context.createLinearGradient(0, 0, 100, 0);

    gr.addColorStop(0, 'red');
    gr.addColorStop(.5, 'yellow');
    gr.addColorStop(1, 'red');

    context.strokeStyle = gr;
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(50, 0);
    context.lineTo(100, 50);
    context.lineTo(50, 100);
    context.lineTo(0, 100);
    context.lineTo(0, 0);
    context.stroke();
  }

円形グラデーション

円形グラデーションは createRadialGradient() メソッドを使って定義する。

前後 3つの引数（x座標、y座標、円の半径）を 1セットとして、開始円と終了円を指定する。x座標と y座標では円の中心点を決める。

createRadialGradient(x, y, radius, x2, y2, radius2);

Demo: http://jsfiddle.net/thleap/qk1zs3ra/5/

  function drawScreen() {
    var gr = context.createRadialGradient(50, 50, 25, 50, 50, 100);

    gr.addColorStop(0, 'red');
    gr.addColorStop(.5, 'yellow');
    gr.addColorStop(1, 'red');

    context.fillStyle = gr;
    context.fillRect(0, 0, 200, 200);
  }
var gr = context.createRadialGradient(50, 50, 25, 50, 50, 100);

gr.addColorStop(0, 'rgb(255, 0, 0)');
gr.addColorStop(.5, 'rgb(0, 255, 0)');
gr.addColorStop(1, 'rgb(255, 0, 0)');

context.fillStyle = gr;
context.fillRect(0, 0, 200, 200);