JavaScript Canvas createLinearGradient 教程
最后修改于 2025 年 4 月 3 日
在本文中，我们将探讨 JavaScript 中的 Canvas createLinearGradient 方法。这项强大的功能允许为填充和描边创建平滑的颜色过渡。掌握渐变对于制作专业外观的图形至关重要。
基本定义
createLinearGradient 方法创建一个沿着直线进行颜色过渡的渐变对象。它需要定义渐变方向的起点和终点。颜色停点定义了颜色在直线上变化的位置。
该方法语法为：createLinearGradient(x0, y0, x1, y1)，其中 (x0,y0) 是起点，(x1,y1) 是终点。颜色停点使用 addColorStop(position, color) 添加。
基本水平渐变
此示例演示了一个从红色到蓝色的简单水平渐变。
<!DOCTYPE html>
<html>
<head>
<title>Basic Horizontal Gradient</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 300, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 300, 200);
</script>
</body>
</html>
这会创建一个从左到右的渐变画布。渐变从 (0,0) 开始，到 (300,0) 结束，覆盖了画布的宽度。两个颜色停点定义了过渡。
位置为 0（起点）的第一个颜色停点是红色。位置为 1（终点）的第二个颜色停点是蓝色。渐变被用作填充样式，覆盖整个画布。
带有多重颜色的对角线渐变
此示例显示了一个带有三个颜色停点的对角线渐变。
<!DOCTYPE html>
<html>
<head>
<title>Diagonal Gradient</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 300, 200);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'yellow');
gradient.addColorStop(1, 'green');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 300, 200);
</script>
</body>
</html>
这里我们创建了一个从左上到右下的对角线渐变。该渐变在位置 0、0.5 和 1 处有三个颜色停点。这会在三种颜色之间创建平滑的过渡。
渐变从左上角的红色开始，中间变为黄色，在右下角结束为绿色。填充覆盖了整个画布。
文本的渐变描边
此示例将渐变应用于文本描边。
<!DOCTYPE html>
<html>
<head>
<title>Gradient Text Stroke</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 300, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'purple');
gradient.addColorStop(1, 'blue');
ctx.font = '48px Arial';
ctx.strokeStyle = gradient;
ctx.lineWidth = 2;
ctx.strokeText('Gradient', 50, 100);
</script>
</body>
</html>
此示例演示了将渐变应用于文本轮廓。渐变从左到右，包含三种颜色。文本仅使用描边绘制，没有填充。
渐变是水平的（0,0 到 300,0），颜色停点位于 0、0.5 和 1。strokeText 方法使用渐变描边样式渲染轮廓文本。
形状的局部渐变
此示例演示了如何将渐变应用于形状的一部分。
<!DOCTYPE html>
<html>
<head>
<title>Partial Gradient</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(100, 50, 200, 150);
gradient.addColorStop(0, 'cyan');
gradient.addColorStop(1, 'magenta');
ctx.fillStyle = gradient;
ctx.fillRect(50, 50, 200, 100);
</script>
</body>
</html>
这里，渐变仅为形状的一部分定义。渐变区域小于填充的矩形，从而产生了有趣的视觉效果。
渐变从 (100,50) 到 (200,150)，而矩形覆盖 (50,50) 到 (250,150)。渐变区域之外的部分使用最近的颜色停点。
带透明度的复杂渐变
此示例结合了多种渐变和透明度效果。
<!DOCTYPE html>
<html>
<head>
<title>Transparent Gradient</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Background gradient
const bgGradient = ctx.createLinearGradient(0, 0, 0, 200);
bgGradient.addColorStop(0, 'lightblue');
bgGradient.addColorStop(1, 'white');
ctx.fillStyle = bgGradient;
ctx.fillRect(0, 0, 300, 200);
// Transparent foreground gradient
const fgGradient = ctx.createLinearGradient(50, 50, 250, 150);
fgGradient.addColorStop(0, 'rgba(255,0,0,0.8)');
fgGradient.addColorStop(0.5, 'rgba(0,255,0,0.5)');
fgGradient.addColorStop(1, 'rgba(0,0,255,0.2)');
ctx.fillStyle = fgGradient;
ctx.fillRect(50, 50, 200, 100);
</script>
</body>
</html>
此示例结合了两个渐变。首先，应用了垂直背景渐变。然后，在其上方绘制了一个透明的前景渐变。
前景渐变使用带 alpha 透明度的 rgba 颜色。这会创建一种半透明效果，背景可以透过前景颜色看到。
来源
在本文中，我们探讨了在 Canvas 中创建和应用线性渐变的各种技术。这些方法对于在 Web 应用程序中创建视觉吸引力的图形和界面至关重要。
作者
列出 所有 JS Canvas 教程。