JavaScript Canvas 径向渐变教程
最后修改于 2025 年 4 月 3 日
在本文中，我们将探讨 JavaScript 中的 Canvas createRadialGradient 方法。此方法会创建从中心点向外辐射的颜色过渡。径向渐变非常适合创建光照效果、球体等。
基本定义
径向渐变是一种从中心点向外辐射的颜色过渡。它需要两个圆来定义渐变区域——内圆和外圆。渐变沿半径在定义的颜色停止点之间过渡。
createRadialGradient 方法接受六个参数：内圆的 x0,y0,r0 和外圆的 x1,y1,r1。颜色停止点使用 addColorStop 添加，范围在 0（开始）到 1（结束）之间。
基本径向渐变
此示例演示了如何创建简单的径向渐变填充。
<!DOCTYPE html>
<html>
<head>
<title>Basic Radial Gradient</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Create radial gradient
const gradient = ctx.createRadialGradient(150, 100, 10, 150, 100, 100);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 300, 200);
</script>
</body>
</html>
这会创建一个以 (150,100) 为中心，内半径为 10，外半径为 100 的径向渐变。颜色从中心的红色过渡到边缘的蓝色。
该渐变用于填充整个画布。请注意渐变如何自然地创建圆形颜色过渡图案。
偏移中心渐变
此示例展示了一个具有偏移中心和外圆的径向渐变。
<!DOCTYPE html>
<html>
<head>
<title>Offset Center Gradient</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Create gradient with offset center
const gradient = ctx.createRadialGradient(100, 100, 20, 200, 100, 100);
gradient.addColorStop(0, 'yellow');
gradient.addColorStop(0.5, 'orange');
gradient.addColorStop(1, 'darkred');
// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 300, 200);
</script>
</body>
</html>
这里内圆位于 (100,100) 处，半径为 20，而外圆位于 (200,100) 处，半径为 100。这会创建一个椭圆形的渐变图案。
颜色停止点创建了从黄色到橙色再到深红色的三色过渡。偏移的中心产生了有趣的光照效果。
圆形径向渐变
此示例将径向渐变专门应用于圆形路径。
<!DOCTYPE html>
<html>
<head>
<title>Gradient Circle</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Create gradient matching circle dimensions
const gradient = ctx.createRadialGradient(150, 100, 0, 150, 100, 80);
gradient.addColorStop(0, 'white');
gradient.addColorStop(0.7, 'lightblue');
gradient.addColorStop(1, 'navy');
// Draw circle with gradient fill
ctx.beginPath();
ctx.arc(150, 100, 80, 0, Math.PI * 2);
ctx.fillStyle = gradient;
ctx.fill();
</script>
</body>
</html>
这通过将渐变尺寸与圆匹配来创建逼真的球体效果。渐变从中心的白色过渡到边缘的深蓝色。
内半径为 0（点源），外半径与圆的 80px 匹配。0.7 的颜色停止点在颜色之间创建了更自然的过渡。
多个颜色停止点
此示例演示了带有多个颜色停止点的径向渐变。
<!DOCTYPE html>
<html>
<head>
<title>Multiple Color Stops</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Create gradient with multiple stops
const gradient = ctx.createRadialGradient(150, 100, 10, 150, 100, 120);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.2, 'orange');
gradient.addColorStop(0.4, 'yellow');
gradient.addColorStop(0.6, 'green');
gradient.addColorStop(0.8, 'blue');
gradient.addColorStop(1, 'violet');
// Fill canvas
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 300, 200);
</script>
</body>
</html>
这会创建一种具有六个不同颜色停止点的彩虹效果。每个停止点沿渐变从中心到边缘的半径均匀分布。
内圆半径为 10 像素，外圆半径为 120 像素，形成了一个大的渐变区域。多个停止点产生了清晰可见的颜色带。
径向渐变描边
此示例展示了如何将径向渐变应用于描边而不是填充。
<!DOCTYPE html>
<html>
<head>
<title>Gradient Stroke</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Create radial gradient
const gradient = ctx.createRadialGradient(150, 100, 0, 150, 100, 150);
gradient.addColorStop(0, 'gold');
gradient.addColorStop(0.5, 'orange');
gradient.addColorStop(1, 'darkred');
// Draw star with gradient stroke
ctx.beginPath();
ctx.moveTo(150, 20);
ctx.lineTo(180, 80);
ctx.lineTo(250, 90);
ctx.lineTo(200, 130);
ctx.lineTo(210, 200);
ctx.lineTo(150, 170);
ctx.lineTo(90, 200);
ctx.lineTo(100, 130);
ctx.lineTo(50, 90);
ctx.lineTo(120, 80);
ctx.closePath();
ctx.strokeStyle = gradient;
ctx.lineWidth = 8;
ctx.stroke();
</script>
</body>
</html>
在这里，我们创建了一个星形并将其描边应用了径向渐变。渐变从中心的金色过渡到边缘的深红色。
8 像素的粗线宽使渐变清晰可见。渐变中心与星形的中心匹配，以获得一致的光照效果。
来源
在本文中，我们探索了在 HTML canvas 上创建和使用径向渐变的各种技术。这些渐变是创建逼真的光照效果、立体形状和充满活力的设计的强大工具。
作者
列出 所有 JS Canvas 教程。