Javascriptista

Canvasの円形グラデーションについて説明します。

DEMO

  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');

  ctx.beginPath();

  /* グラデーション領域をセット */
  var grad  = ctx.createRadialGradient(200,200,100,200,200,200);

  /* グラデーション終点のオフセットと色をセット */
  grad.addColorStop(0.1,'rgb(192, 80, 77)');    // 赤
  grad.addColorStop(0.6,'rgb(128, 100, 162)');  // 紫

  /* グラデーションをfillStyleプロパティにセット */
  ctx.fillStyle = grad;

  /* 円を描画 */
  ctx.rect(0,0, 400,400);

  ctx.fill();

線形グラデーションとの違いは、createRadialGradientで呼び出す部分だけです。
・createRadialGradient(x1座標,y1座標,半径1,x2座標,y2座標,半径2)
色を指定する部分(addColorStop)は線形グラデーションと変わりない。 第一引数のoffsetは線形グラデーションんと同様に0-1の範囲で、色の交わる部分を指定します。

円形グラデーションで円を描く

DEMO

円形グラデーションで円を描くこともできます。

  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');

  ctx.beginPath();

  /* グラデーション領域をセット */
 var grad  = ctx.createRadialGradient(200,200,100,200,200,200);

  /* グラデーション終点のオフセットと色をセット */
  grad.addColorStop(0.1,'rgb(192, 80, 77)');    // 赤
  grad.addColorStop(0.6,'rgb(128, 100, 162)');  // 紫

  /* グラデーションをfillStyleプロパティにセット */
  ctx.fillStyle = grad;

  /* 矩形を描画 */
  ctx.arc(200,200,150,0/180*Math.PI,360/180*Math.PI,true);

  ctx.fill();