canvas 线性渐变

  1. createLinearGradient(x1, y1, x2, y2)：表示渐变的起点 (x1, y1) 与终点 (x2, y2) ；
  2. gradient.addColorStop(position, color)
    • position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置，例如，0.5 表示颜色会出现在正中间；
    • color 参数必须是一个有效的 CSS 颜色值（如 #FFF、rgba(0, 0, 0, 1) 等等）；
  3. 示例代码
    <script type="text/javascript">
    window.onload = function () {
        var canvas = document.querySelector("#test");
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");

            var gradient = ctx.createLinearGradient(0, 0, 200, 200);
            gradient.addColorStop(0, "red");
            gradient.addColorStop(0.5, "yellow");
            gradient.addColorStop(0.7, "pink");
            gradient.addColorStop(1, "green");

            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, 300, 300);
        }
    }
</script>
  4. 效果展示

canvas 径向渐变

  1. createRadialGradient(x1, y1, r1, x2, y2, r2)

    • 前三个参数则定义另一个以 (x1, y1) 为原点，半径为 r1 的圆；
    • 后三个参数则定义另一个以 (x2, y2) 为原点，半径为 r2 的圆；

  2. 示例代码

    <script type="text/javascript">
  window.onload = function () {
      var canvas = document.querySelector("#test");
      if (canvas.getContext) {
          var ctx = canvas.getContext("2d");

          var gradient = ctx.createRadialGradient(150, 150, 50, 150, 150, 100)
          gradient.addColorStop(0, "red");
          gradient.addColorStop(0.5, "yellow");
          gradient.addColorStop(0.7, "pink");
          gradient.addColorStop(1, "green");

          ctx.fillStyle = gradient;
          ctx.fillRect(0, 0, 300, 300);
      }
  }
</script>

  3. 效果展示

打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于产品、设计、开发的问题和看法，还有技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程

了解更多

目录

  1. 1. canvas 线性渐变
  2. 2. canvas 径向渐变