Canvas基础篇：径向渐变createRadialGradient详解-CSDN博客

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

Canvas基础篇：径向渐变createRadialGradient详解

前言
createRadialGradient
结语

前言

在上一篇文章Canvas基础篇：线性渐变createLinearGradient详解中，我们讲述了createLinearGradient() 线性渐变方法，本文将讲createRadialGradient() 径向渐变方法

createRadialGradient

createRadialGradient()：该方法用于创建径向渐变，即：从一个中心点向外辐射的渐变效果。常用于创建圆形或椭圆形的渐变填充，如光影、球体或光晕效果，其语法格式如下：

语法

const gradient = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

其中，x0, y0表示内圆的中心点坐标；r0表示内圆的半径，其值必须是非负数；x1, y1表示外圆的中心点坐标；r1表示外圆的半径，其值必须是非负数。径向渐变与线性渐变一样，创建径向渐变后需要使用 addColorStop() 方法定义颜色分布。

简单示例

效果预览

简单示例

代码实现

<!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.createRadialGradient(
        200, 200, 50, // 内圆
        200, 200, 150 // 外圆
      );

      // 添加颜色停止点
      gradient.addColorStop(0, 'red'); // 内圆边缘颜色
      gradient.addColorStop(0.5, 'yellow'); // 中间颜色
      gradient.addColorStop(1, 'blue'); // 外圆边缘颜色

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

径向渐变控制

同心渐变：当两个圆的中心点相同时（如上面的示例），会创建从中心向外的均匀辐射渐变。
偏心渐变：通过设置不同的中心点坐标，可以创建偏移的渐变效果，实现更复杂的光影变化。
颜色过渡：添加多个颜色停止点可以创建更丰富的渐变效果，如彩虹、金属质感等。
透明效果：使用 rgba() 颜色值可以创建带有透明度的渐变，实现柔和的光晕效果。
下面来看一个综合示例：

效果预览

综合示例

代码实现

<!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');
    
      // 创建3D球体效果
      const gradient = ctx.createRadialGradient(
        180, 180, 0, // 内圆（亮点）
        200, 200, 100 // 外圆
      );
    
      gradient.addColorStop(0, 'white'); // 高光点
      gradient.addColorStop(0.2, 'lightblue'); // 亮部
      gradient.addColorStop(0.8, 'blue'); // 暗部
      gradient.addColorStop(1, 'darkblue'); // 阴影边缘
    
      ctx.beginPath();
      ctx.arc(200, 200, 100, 0, Math.PI * 2);
      ctx.fillStyle = gradient;
      ctx.fill();
    </script>
  </body>
</html>