Canvas 渐变

HTML Canvas 渐变

理解 Canvas 渐变

渐变允许在两个或多个指定颜色之间创建平滑过渡。它们可用于填充形状（矩形、圆形、路径）、线条甚至文本，提供比纯色更丰富的视觉效果。

Canvas API 中有两种主要的渐变类型：

• createLinearGradient(x0, y0, x1, y1): 创建线性渐变。渐变沿从 (x0, y0) 到 (x1, y1) 的线段定义。颜色沿此线过渡。
• createRadialGradient(x0, y0, r0, x1, y1, r1): 创建径向（圆形）渐变。渐变由两个圆定义：一个起始圆，中心位于 (x0, y0)，半径为 r0；一个结束圆，中心位于 (x1, y1)，半径为 r1。颜色在这两个圆之间过渡。

创建渐变对象后，必须使用 addColorStop() 方法定义其颜色停止点。

addColorStop(offset, color): 为渐变指定一个颜色停止点。offset 是一个介于 0（渐变起点）和 1（渐变终点）之间的数字，color 是一个 CSS 颜色字符串（例如，‘red’、‘#FF0000’、‘rgba(255,0,0,0.5)’）。至少需要两个颜色停止点才能创建可见的渐变。

要应用渐变，请将渐变对象赋值给渲染上下文的 fillStyle 或 strokeStyle 属性，然后绘制所需的形状或文本。

使用 createLinearGradient()

此示例演示了创建一个从红色到蓝色的水平线性渐变，并用它来填充一个矩形。

// Ensure you have a canvas element in your HTML: <canvas id="myCanvas" width="200" height="100"></canvas>
// 确保你的 HTML 中有一个 canvas 元素：<canvas id="myCanvas" width="200" height="100"></canvas>
const canvasLinear = document.getElementById('myCanvas');
const ctxLinear = canvasLinear.getContext('2d');

// Create a linear gradient
// 创建一个线性渐变
// Gradient line from (0,0) to (200,0) - horizontal gradient across the canvas width
// 渐变线从 (0,0) 到 (200,0) - 跨越 canvas 宽度的水平渐变
const linearGradient = ctxLinear.createLinearGradient(0, 0, 200, 0);

// Add color stops
// 添加颜色停止点
linearGradient.addColorStop(0, 'red');    // Start color // 起始颜色
linearGradient.addColorStop(0.5, 'yellow'); // Middle color // 中间颜色
linearGradient.addColorStop(1, 'blue');   // End color // 结束颜色

// Apply the gradient to fillStyle
// 将渐变应用于 fillStyle
ctxLinear.fillStyle = linearGradient;

// Draw a filled rectangle
// 绘制一个填充矩形
ctxLinear.fillRect(10, 10, 180, 80);

使用 createRadialGradient()

此示例展示了一个从红色（内圆）过渡到蓝色（外圆）的径向渐变。

// Ensure you have a canvas element in your HTML: <canvas id="myRadialCanvas" width="200" height="150"></canvas>
// 确保你的 HTML 中有一个 canvas 元素：<canvas id="myRadialCanvas" width="200" height="150"></canvas>
const canvasRadial = document.getElementById('myRadialCanvas'); // Use a different ID or reuse if appropriate
// 使用一个不同的 ID，如果合适也可以重复使用
const ctxRadial = canvasRadial.getContext('2d');

// Create a radial gradient
// 创建一个径向渐变
// Start circle: (75, 50) with radius 5
// 起始圆：中心 (75, 50)，半径 5
// End circle: (90, 60) with radius 100
// 结束圆：中心 (90, 60)，半径 100
const radialGradient = ctxRadial.createRadialGradient(75, 50, 5, 90, 60, 100);

// Add color stops
// 添加颜色停止点
radialGradient.addColorStop(0, 'red');
radialGradient.addColorStop(1, 'blue'); // Original tutorial had 'white', changed to blue for more contrast
// 原始教程是 'white'，为了对比度更高改为 blue

// Apply the gradient to fillStyle
// 将渐变应用于 fillStyle
ctxRadial.fillStyle = radialGradient;

// Draw a filled rectangle (the gradient will be clipped by the rectangle's bounds)
// 绘制一个填充矩形（渐变将被矩形边界剪裁）
ctxRadial.fillRect(10, 10, 150, 100);

应用场景：创建具有视觉吸引力的背景、按钮样式、图表元素，或在游戏和交互式可视化中实现特殊效果。