JavaScript Canvas fillStyle 教程
最后修改于 2025 年 4 月 3 日
在本文中，我们将探讨 JavaScript 中的 Canvas fillStyle 属性。此属性对于在 HTML canvas 上用颜色、渐变或图案填充形状和路径至关重要。掌握 fillStyle 对于创建图形至关重要。
基本定义
Canvas fillStyle 是一个属性，用于指定用于填充形状的颜色、渐变或图案。与绘制轮廓的 stroke 不同，fillStyle 会为形状的内部着色。它与 fill 方法（如 fillRect）一起使用。
fillStyle 属性接受颜色字符串、渐变对象和图案对象。它可以随时更改，以便为不同的形状应用不同的填充。默认的 fillStyle 为黑色（#000000）。
基本的 fillStyle 用法
此示例演示如何用纯色填充矩形。
<!DOCTYPE html>
<html>
<head>
<title>Basic Canvas fillStyle</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 设置为“blue”，然后绘制一个已填充的矩形。
fillRect 方法在位置 (50,50) 处绘制一个已填充的矩形，宽度为 200，高度为 100。这展示了使用 fillStyle 最简单的方法。
带有 fillStyle 的自定义路径
此示例演示如何创建自定义路径并用颜色填充它。
<!DOCTYPE html>
<html>
<head>
<title>Custom Path fillStyle</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 = 'rgba(255, 0, 0, 0.5)';
ctx.fill();
</script>
</body>
</html>
在这里，我们使用路径绘制方法创建了一个自定义三角形路径。该路径使用 closePath 闭合，将最后一个点连接到第一个点。
我们将使用 rgba 颜色表示法作为 fillStyle，它允许透明度（0.5 alpha）。fill 方法使用我们的半透明红色填充路径。
渐变 fillStyle
此示例演示如何用线性渐变填充形状。
<!DOCTYPE html>
<html>
<head>
<title>Gradient fillStyle</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, 'yellow');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(50, 50, 200, 100);
</script>
</body>
</html>
此示例创建一个从红色到黄色再到蓝色的线性渐变。该渐变被用作矩形的 fillStyle。
createLinearGradient 定义了渐变方向（此处为水平）。addColorStop 添加了颜色过渡点。然后使用该渐变填充矩形。
图案 fillStyle
此示例展示了如何用图像图案填充形状。
<!DOCTYPE html>
<html>
<head>
<title>Pattern fillStyle</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<img id="patternImg" src="texture.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(50, 50, 200, 100);
};
</script>
</body>
</html>
在这里，我们从图像创建了一个图案并将其用作 fillStyle。图像是隐藏的，但已加载以创建图案。图案可以以不同的方式平铺。
createPattern 方法接受图像和重复样式。我们使用“repeat”来平铺图像。当图像加载时，该图案随后用于填充矩形。
多个 fillStyle 用法
此示例演示了如何为多个形状使用不同的 fillStyle 值。
<!DOCTYPE html>
<html>
<head>
<title>Multiple fillStyle</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// First shape with color
ctx.fillStyle = '#FF5733';
ctx.fillRect(50, 50, 100, 100);
// Second shape with gradient
const gradient = ctx.createRadialGradient(300, 100, 10, 300, 100, 60);
gradient.addColorStop(0, 'white');
gradient.addColorStop(1, 'purple');
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(300, 100, 60, 0, Math.PI * 2);
ctx.fill();
// Third shape with pattern
const patternCanvas = document.createElement('canvas');
const pCtx = patternCanvas.getContext('2d');
patternCanvas.width = 20;
patternCanvas.height = 20;
pCtx.fillStyle = 'black';
pCtx.fillRect(0, 0, 10, 10);
pCtx.fillRect(10, 10, 10, 10);
const pattern = ctx.createPattern(patternCanvas, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(50, 180, 300, 80);
</script>
</body>
</html>
此示例显示了三个不同的形状，每个形状都有不同的 fillStyle：纯色、径向渐变和以编程方式创建的图案。
我们创建了一个红色正方形，一个带有从白到紫径向渐变的圆形，以及一个用在单独 canvas 上制作的棋盘格图案填充的矩形。
来源
在本文中，我们探讨了在 HTML canvas 上填充形状和路径的各种技术。掌握 fillStyle 对于在 Web 应用程序中创建视觉吸引力的图形和可视化至关重要。
作者
列出 所有 JS Canvas 教程。