JavaScript Canvas 矩形教程
最后修改于 2025 年 4 月 3 日
在本文中，我们探讨了 JavaScript 中的 Canvas 矩形方法。这些方法对于在 HTML Canvas 上绘制矩形至关重要。掌握矩形绘制对于创建 UI 元素和可视化至关重要。
基本定义
Canvas 矩形是使用特定方法绘制的基本形状。主要方法是 fillRect、strokeRect 和 clearRect。每种方法在矩形绘制中都有不同的用途。
矩形由其左上角坐标、宽度和高度定义。您可以使用颜色、渐变、图案等来自定义其外观。
基本矩形绘制
本示例演示如何在 canvas 上绘制一个简单的填充矩形。
<!DOCTYPE html>
<html>
<head>
<title>Basic Canvas Rectangle</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>Stroked Rectangle</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
ctx.strokeRect(50, 50, 200, 100);
</script>
</body>
</html>
在这里，我们使用 strokeRect 而不是 fillRect 来仅绘制轮廓。strokeStyle 将轮廓颜色设置为红色。
lineWidth 属性控制轮廓的粗细。此示例演示了如何创建具有自定义样式的矩形边框。
清除矩形区域
此示例演示了如何使用 clearRect 擦除 Canvas 的部分区域。
<!DOCTYPE html>
<html>
<head>
<title>Clear Rectangle</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw a filled rectangle
ctx.fillStyle = 'green';
ctx.fillRect(0, 0, 300, 200);
// Clear a rectangular area
ctx.clearRect(50, 50, 200, 100);
</script>
</body>
</html>
首先，我们将整个 Canvas 填充为绿色。然后，我们使用 clearRect 擦除中间的一个矩形区域。
clearRect 方法使像素透明。它可用于擦除 Canvas 的部分区域或在绘图中创建透明孔。
渐变填充矩形
此示例显示了如何用线性渐变填充矩形。
<!DOCTYPE html>
<html>
<head>
<title>Gradient Rectangle</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Create gradient
const gradient = ctx.createLinearGradient(0, 0, 300, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'yellow');
gradient.addColorStop(1, 'blue');
// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillRect(50, 50, 200, 100);
</script>
</body>
</html>
我们创建了一个从红到黄再到蓝色的水平渐变。createLinearGradient 方法定义了渐变方向。
使用 addColorStop 添加颜色停止点。然后，在绘制矩形之前，将渐变应用于填充样式。这创建了一个色彩鲜艳的渐变填充矩形。
具有不同样式的多个矩形
此示例演示了如何绘制具有各种样式的多个矩形。
<!DOCTYPE html>
<html>
<head>
<title>Multiple Rectangles</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Filled rectangle
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fillRect(50, 50, 100, 100);
// Stroked rectangle
ctx.strokeStyle = 'blue';
ctx.lineWidth = 3;
ctx.strokeRect(200, 50, 100, 100);
// Both filled and stroked
ctx.fillStyle = 'green';
ctx.strokeStyle = 'black';
ctx.lineWidth = 5;
ctx.fillRect(50, 200, 100, 50);
ctx.strokeRect(50, 200, 100, 50);
// Rounded rectangle (custom function)
function roundRect(x, y, w, h, r) {
ctx.beginPath();
ctx.moveTo(x + r, y);
ctx.lineTo(x + w - r, y);
ctx.quadraticCurveTo(x + w, y, x + w, y + r);
ctx.lineTo(x + w, y + h - r);
ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
ctx.lineTo(x + r, y + h);
ctx.quadraticCurveTo(x, y + h, x, y + h - r);
ctx.lineTo(x, y + r);
ctx.quadraticCurveTo(x, y, x + r, y);
ctx.closePath();
}
roundRect(200, 200, 150, 80, 20);
ctx.fillStyle = 'purple';
ctx.fill();
</script>
</body>
</html>
此示例显示了四种不同的矩形样式：一个半透明填充矩形、一个描边矩形、两者的组合以及一个圆角矩形。
圆角矩形是通过一个自定义函数创建的，该函数使用弯曲的角绘制路径。这演示了如何扩展基本的矩形功能。
来源
在本文中，我们探讨了在 HTML Canvas 上绘制矩形的各种技术。掌握这些方法对于在 Web 应用程序中创建 UI 元素和可视化至关重要。
作者
列出 所有 JS Canvas 教程。