canvas 要素サンプル - グラデーション

コード

function draw() {
  try {
    var ctx = document.getElementById('canvas').getContext('2d');
  } catch(ex) {}
  if(!ctx) return;
  
  ctx.lineWidth = 3;
  var lGrad1 = ctx.createLinearGradient(0, 0, 210, 210);
  lGrad1.addColorStop(0, 'red');
  lGrad1.addColorStop(.5, 'lime');
  lGrad1.addColorStop(.5, 'aqua');
  lGrad1.addColorStop(1, 'blue');
  ctx.strokeStyle = lGrad1;
  ctx.strokeRect(0, 0, 210, 210);
  
  var lGrad2 = ctx.createLinearGradient(0, 0, 100, 100);
  lGrad2.addColorStop(0, 'yellow');
  lGrad2.addColorStop(1, 'green');
  ctx.fillStyle = lGrad2;
  ctx.fillRect(10, 10, 90, 90);

  var lGrad3 = ctx.createLinearGradient(0, 0, 0, 100);
  lGrad3.addColorStop(0, 'yellow');
  lGrad3.addColorStop(1, 'green');
  ctx.fillStyle = lGrad3;
  ctx.fillRect(110, 10, 90, 90);


  var rGrad1 = ctx.createRadialGradient(55, 155, 50, 55, 155, 5);
  rGrad1.addColorStop(0, 'navy');
  rGrad1.addColorStop(1, 'aqua');
  ctx.fillStyle = rGrad1;
  ctx.fillRect(10, 110, 90, 90);

  var rGrad2 = ctx.createRadialGradient(155, 155, 50, 155, 155, 25);
  rGrad2.addColorStop(0, 'navy');
  rGrad2.addColorStop(0.75, 'aqua');
  rGrad2.addColorStop(1, 'blue');
  ctx.fillStyle = rGrad2;
  ctx.fillRect(110, 110, 90, 90);
}