HTML5 canvasでグラデーションを描画する

HTML5のcanvas APIには、線形グラデーションを作成するcreateLinearGradient()、円形グラデーションを作成するcreateRadialGradient()が用意されており、これらのメソッドを利用することで簡単に線や塗りにグラデーションを使用することができます。

線形グラデーションを作成する createLinearGradient()

線形グラデーションを作成するには、createLinearGradient()を使用します。第1, 2引数でグラデーションの始点(x, y)、第3, 4引数で終点(x, y)を指定します。グラデーションの分岐点はaddColorStop()で指定します。第1引数は、分岐点の位置を0〜1の比率で指定し、第2引数で色を指定します。

作成したグラデーションは、塗りや線のスタイルとして指定することができます。下記の例では、createLinearGradient()の戻り値であるCanvasGradientオブジェクトをfillStyleに指定し、矩形を描画しています。

JavaScript

window.onload = function() {
  var canvas = document.getElementById('my-canvas');
  var context = canvas.getContext('2d');
  context.save();
  context.translate(canvas.width * 0.5, canvas.height * 0.5);
  var linerGradient = context.createLinearGradient(-180, 0, 180, 0);
  linerGradient.addColorStop(0, '#ff0000');
  linerGradient.addColorStop(0.17, '#ff00ff');
  linerGradient.addColorStop(0.33, '#0000ff');
  linerGradient.addColorStop(0.5, '#00ffff');
  linerGradient.addColorStop(0.67, '#00ff00');
  linerGradient.addColorStop(0.83, '#ffff00');
  linerGradient.addColorStop(1, '#ff0000');
  context.fillStyle = linerGradient;
  context.fillRect(-180, -135, 360, 270);
  context.restore();
};

円形グラデーションを作成する createRadialGradient()

createRadialGradient()を使うと円形グラデーションを作成することができます。createRadialGradient()では、6つの引数でグラデーションを開始する円形と終了する円形を指定します。まず、第1, 2, 3引数でグラデーションを開始する円形をx, y, 半径の順に指定します。次に第4, 5, 6引数でグラデーションを終了する円形のx, y, 半径を指定します。

グラデーションの分岐点に関しては、線形グラデーションの場合と同様にaddColorStop()で分岐点の位置と色を指定します。下記の例では、作成した円形グラデーションをstrokeStyleに指定してstroke()することにより、虹のような半円を描画しています。

JavaScript

window.onload = function() {
  var canvas = document.getElementById('my-canvas');
  var context = canvas.getContext('2d');
  context.save();
  context.translate(canvas.width * 0.5, canvas.height * 0.5);
  var radialGradient = context.createRadialGradient(0, 0, 90, 0, 0, 110);
  radialGradient.addColorStop(0, 'rgba(146, 7, 131, 0.5)');
  radialGradient.addColorStop(0.17, 'rgba(29, 32, 136, 0.5)');
  radialGradient.addColorStop(0.33, 'rgba(0, 104, 183, 0.5)');
  radialGradient.addColorStop(0.5, 'rgba(0, 153, 68, 0.5)');
  radialGradient.addColorStop(0.67, 'rgba(255, 241, 0, 0.5)');
  radialGradient.addColorStop(0.83, 'rgba(243, 152, 0, 0.5)');
  radialGradient.addColorStop(1, 'rgba(230, 0, 18, 0.5)');
  context.strokeStyle = radialGradient;
  context.lineWidth = 20;
  context.lineCap = 'butt';
  context.beginPath();
  context.arc(0, 0, 100, 0, 180 * Math.PI / 180, true);
  context.stroke();
  context.restore();
};