JavaScript Canvas fillRect 教程
最后修改于 2025 年 4 月 3 日
在本文中，我们将探讨 JavaScript 中的 Canvas fillRect 方法。此方法对于在 HTML canvas 上绘制填充矩形至关重要。掌握 fillRect 对于创建图形和可视化至关重要。
基本定义
fillRect 方法会在 canvas 上绘制一个填充矩形。它接受四个参数：左上角的 x、y 坐标、宽度和高度。矩形使用当前的填充样式进行填充。
在使用 fillRect 之前，您必须使用 fillStyle 属性设置填充样式。它可以是颜色、渐变或图案。该方法是 Canvas 2D API 绘图操作的一部分。
基本的 fillRect 用法
本示例演示如何在 canvas 上绘制一个简单的填充矩形。
<!DOCTYPE html>
<html>
<head>
<title>Basic Canvas fillRect</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>Multiple fillRect</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// First rectangle
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);
// Second rectangle
ctx.fillStyle = 'green';
ctx.fillRect(200, 50, 150, 100);
// Third rectangle
ctx.fillStyle = 'rgba(0, 0, 255, 0.5)';
ctx.fillRect(100, 150, 200, 100);
</script>
</body>
</html>
在这里，我们绘制了三个具有不同颜色和透明度的矩形。每个矩形在设置了新的 fillStyle 后绘制。
第三个矩形使用带 alpha 透明度 (0.5) 的 rgba 颜色。这展示了如何在 canvas 上创建半透明填充矩形。
渐变填充矩形
本示例演示了如何创建用线性渐变填充的矩形。
<!DOCTYPE html>
<html>
<head>
<title>Gradient fillRect</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>
在这里，我们创建了一个从红色到黄色再到蓝色的线性渐变。此渐变用作我们矩形的填充样式。
createLinearGradient 定义了渐变方向（本例中为水平）。addColorStop 添加了颜色过渡点。然后使用该渐变填充矩形。
图案填充矩形
本示例展示了如何用图像图案填充矩形。
<!DOCTYPE html>
<html>
<head>
<title>Pattern fillRect</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(50, 50, 200, 100);
};
</script>
</body>
</html>
本示例加载了一个图像，并将其用作重复图案来填充矩形。该图像在视图中是隐藏的，但用作纹理。
createPattern 方法从图像创建图案。“repeat”选项在两个方向上平铺图像。然后使用该图案作为 fillStyle。
动画 fillRect
本示例演示了如何使用 requestAnimationFrame 和 fillRect 进行动画。
<!DOCTYPE html>
<html>
<head>
<title>Animated fillRect</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let x = 0;
const speed = 2;
function animate() {
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw rectangle
ctx.fillStyle = 'purple';
ctx.fillRect(x, 50, 50, 50);
// Update position
x += speed;
if (x > canvas.width) x = -50;
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
本示例创建了一个简单的动画，其中一个矩形在 canvas 上移动。动画循环是使用 requestAnimationFrame 创建的。
每一帧都会清除 canvas，在当前位置绘制矩形，然后更新位置。当矩形离开 canvas 时，它会环绕。
来源
在本文中，我们探讨了在 HTML canvas 上绘制填充矩形的各种技术。掌握 fillRect 对于在 Web 应用程序中创建图形和可视化至关重要。
作者
列出 所有 JS Canvas 教程。