Canvas基础篇：线性渐变createLinearGradient详解-CSDN博客

本文链接：https://blog.csdn.net/wuhen_n/article/details/147761144

Canvas基础篇：线性渐变createLinearGradient详解

前言
createLinearGradient
结语

前言

在CSS中，提供了linear-gradient()等方法为标签设置渐变色；在Canvas中，也有类似的方法设置渐变色，分别是createLinearGradient()方法和createRadialGradient()方法，本文将讲述createLinearGradient() 线性渐变方法。

createLinearGradient

createLinearGradient()：该方法用于创建线性渐变，即：在两个端点之间进行颜色的平滑过渡。借助createLinearGradient()，我们可以自定义渐变的方向、颜色以及位置，进而为 Canvas 图形增添丰富的视觉效果，其语法格式如下：

语法

const gradient = ctx.createLinearGradient(x0, y0, x1, y1);

其中，x0, y0, x1, y1 定义了渐变的起始坐标(x0, y0)和终点坐标(x1, y1)，并返回一个CanvasGradient对象，后续可通过这个对象添加颜色停止点：

gradient.addColorStop(offset, color);

其中，offset 取值为 0.0 到 1.0 之间的浮点数，用于标识颜色在渐变中的位置；color 表示颜色值，可以是 CSS 颜色值，如"red"、“#FF0000”、"rgba(255,0,0,0.5)"等。

简单示例

效果预览

线性渐变示例

代码实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单示例</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');

      // 创建线性渐变（从上到下）
      const gradient = ctx.createLinearGradient(100, 0, 100, 100);

      // 添加颜色停止点
      gradient.addColorStop(0, 'red'); // 起点颜色
      gradient.addColorStop(0.5, 'yellow'); // 中间颜色
      gradient.addColorStop(1, 'blue'); // 终点颜色

      // 应用渐变填充
      ctx.fillStyle = gradient;
      ctx.fillRect(0, 0, 100, 100);
    </script>
  </body>
</html>

渐变方向控制

上述示例代码给出了一个简单的线性渐变示例，我们可以通过调整起点和终点的坐标，就能够改变渐变的方向：

水平渐变：保证起始点和终点的纵坐标一致，如：将起点设为(0, 0)，终点设为(canvas.width, 0)。
垂直渐变：保证起始点和终点的横坐标一致，如：起点设为(0, 0)，终点设为(0, canvas.height)。
对角线渐变：保证起始点和终端的横纵坐标成一定比例，如：起点为(0, 0)，终点为(canvas.width, canvas.height)。
任意角度：只需指定两个合适的点即可实现。
下面来看一个综合示例：

效果预览

综合示例

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合示例</title>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        ctx.lineWidth = 1;

        // 第一条线：从上到下
        const gradient1 = ctx.createLinearGradient(10, 10, 200, 200);
        gradient1.addColorStop(0, 'red');
        gradient1.addColorStop(0.5, 'yellow');
        gradient1.addColorStop(1, 'blue');
        ctx.fillStyle = gradient1;
        ctx.beginPath();
        ctx.moveTo(10, 30);
        ctx.lineTo(10, 200);
        ctx.lineTo(0, 200);
        ctx.lineTo(15, 210);
        ctx.lineTo(30, 200);
        ctx.lineTo(20, 200);
        
        ctx.lineTo(20, 50);
        
        ctx.lineTo(200, 200);
        ctx.lineTo(190, 210);
        ctx.lineTo(215, 205); 
        ctx.lineTo(220, 180);
        ctx.lineTo(210, 190);
        
        ctx.lineTo(30, 40);
        
        ctx.lineTo(220, 40);
        ctx.lineTo(220, 50);
        ctx.lineTo(230, 35);
        ctx.lineTo(220, 20);
        ctx.lineTo(220, 30);
        ctx.lineTo(10, 30);
        
        ctx.fill();

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