JavaScript Canvas 填充教程
最后修改于 2025 年 4 月 3 日
在本文中，我们将探讨 JavaScript 中的 Canvas 填充方法。这些方法对于为 HTML canvas 上的形状和路径的内部着色至关重要。掌握填充是创建充满活力的图形的关键。
基本定义
Canvas 填充是指为形状或路径的内部着色的过程。与绘制轮廓的描边不同，填充会为整个封闭区域着色。填充样式可以是纯色、渐变或图案。
主要的填充方法有 fill、fillRect 和 fillText。这些方法与路径绘制方法（如 arc 和 rect）配合使用，以创建填充的形状。
基本矩形填充
本示例演示如何在 canvas 上绘制一个简单的填充矩形。
<!DOCTYPE html>
<html>
<head>
<title>Basic Canvas Fill</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 200, 100);
</script>
</body>
</html>
在此基本示例中，我们创建了一个 canvas 元素并获取其 2D 渲染上下文。我们使用 fillStyle 将填充颜色设置为蓝色。
fillRect 方法在位置 (50,50) 处绘制一个宽度为 200、高度为 100 的填充矩形。这展示了在 canvas 上创建填充形状的最简单方法。
自定义路径填充
本示例展示了如何创建自定义路径并用颜色填充它。
<!DOCTYPE html>
<html>
<head>
<title>Custom Path Fill</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 150);
ctx.lineTo(250, 50);
ctx.closePath();
ctx.fillStyle = 'red';
ctx.fill();
</script>
</body>
</html>
在这里，我们使用 beginPath、moveTo 和 lineTo 创建了一个自定义三角形路径。closePath 将最后一个点连接到第一个点。
定义路径后，我们将填充颜色设置为红色，然后调用 fill 为内部着色。这演示了填充复杂的自定义路径。
带渐变的圆形填充
本示例演示了如何用径向渐变填充圆形。
<!DOCTYPE html>
<html>
<head>
<title>Gradient Circle Fill</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.createRadialGradient(150, 100, 10, 150, 100, 80);
gradient.addColorStop(0, 'white');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(150, 100, 80, 0, Math.PI * 2);
ctx.fill();
</script>
</body>
</html>
此示例创建了一个从白色到蓝色的径向渐变。渐变中心位于 (150,100)，内半径为 10，外半径为 80。
createRadialGradient 定义了渐变属性。addColorStop 添加了颜色过渡点。然后使用该渐变填充一个半径为 80 像素的圆形。
图案填充
本示例展示了如何用图像图案填充形状。
<!DOCTYPE html>
<html>
<head>
<title>Pattern Fill</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<img id="patternImg" src="pattern.png" style="display:none;">
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = document.getElementById('patternImg');
img.onload = function() {
const pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 300, 200);
};
</script>
</body>
</html>
此示例加载一个图像，并将其用作重复图案填充整个 canvas。图像已通过 CSS 隐藏，但仍可访问。
createPattern 方法从图像创建图案。我们将此图案设置为填充样式，并将其应用于覆盖整个 canvas 的矩形。
带有填充规则的复杂形状
本示例演示了用于复杂形状的奇偶填充规则。
<!DOCTYPE html>
<html>
<head>
<title>Fill Rule Example</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
// Outer rectangle
ctx.rect(50, 50, 200, 100);
// Inner rectangle
ctx.rect(100, 75, 100, 50);
ctx.fillStyle = 'purple';
ctx.fill('evenodd');
</script>
</body>
</html>
此示例创建了一个带有另一个矩形在其内部的矩形。使用奇偶填充规则，内部区域未被填充，从而产生边框效果。
fill 方法接受一个可选的填充规则参数。“evenodd”表示交叉计数为奇数的区域不会被填充，而“nonzero”（默认）则填充所有封闭区域。
来源
在本文中，我们探索了在 HTML canvas 上填充路径和形状的各种技术。掌握这些方法对于在 Web 应用程序中创建多彩图形和可视化至关重要。
作者
列出 所有 JS Canvas 教程。