canvas 创建渐变图形

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      text-align: center;
    }
    canvas {
      background: #ddd;
    }
  </style>
</head>
<body>
  <h3>使用渐变对象</h3>
  <canvas id="c5" width="500" height="400"></canvas>
  <script>
    var ctx = c5.getContext('2d');

    //ctx.fillStyle = '#0f0';
    //创建一个渐变对象
    var g = ctx.createLinearGradient(50,100, 450, 100);
    g.addColorStop(0, '#f00');
    g.addColorStop(0.5, '#ff0');
    g.addColorStop(1, '#0f0');
    ctx.fillStyle = g;
    ctx.fillRect(50,100, 400, 200);

    ctx.strokeStyle = g;
//    ctx.strokeRect(50,100, 400,200);

  </script>
</body>
</html>