onload = function() {
  draw();
};
function draw() {
  var canvas = document.getElementById('c1');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  /* グラデーション領域をセット */
  var grad  = ctx.createRadialGradient(70,70,20,70,70,70);
  /* グラデーション終点のオフセットと色をセット */
  grad.addColorStop(0,'red');      // 赤
  grad.addColorStop(0.5,'yellow'); // 黄
  grad.addColorStop(1,'blue');     // 青
  /* グラデーションをfillStyleプロパティにセット */
  ctx.fillStyle = grad;
  /* 矩形を描画 */
  ctx.rect(0,0, 140,140);
  ctx.fill();
}

「円形グラデーションを指定する」に戻る