zoukankan html css js c++ java

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>

查看全文

相关阅读:
第三次上机
 第5次作业
 第二次上机练习
 第三次作业
 第一次作业
 第一次作业
 第二次上机练习
 第二次作业
 第一次作业
 第四周作业

原文地址：https://www.cnblogs.com/web-fusheng/p/6906605.html