JavaScript Canvas strokeRect 教程
最后修改于 2025 年 4 月 3 日
本教程将探讨 JavaScript 中的 Canvas strokeRect 方法。strokeRect 方法在 HTML canvas 元素上绘制矩形轮廓。理解此方法对于创建线框图至关重要。
基本定义
strokeRect 方法在 canvas 上绘制矩形轮廓。与 fillRect 不同，它只绘制边框，而不填充内部。可以使用 stroke 属性自定义矩形的外观。
该方法接受四个参数：x、y、width 和 height。这些参数定义了矩形的位置和尺寸。描边样式和线条宽度会影响轮廓的外观。
基本的 strokeRect 示例
本示例演示了 strokeRect 的最简单用法，用于绘制矩形。
<!DOCTYPE html>
<html>
<head>
<title>Basic strokeRect</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
ctx.strokeRect(50, 50, 200, 100);
</script>
</body>
</html>
此代码在 (50,50) 位置创建一个黑色矩形轮廓，宽度为 200px，高度为 100px。线条宽度设置为 2 像素进行描边。
如果未指定，strokeStyle 属性默认为黑色。矩形将相对于 canvas 坐标系从左上角开始绘制。
自定义 strokeRect
本示例展示了如何使用不同的样式自定义描边外观。
<!DOCTYPE html>
<html>
<head>
<title>Customized strokeRect</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Red rectangle with thick border
ctx.strokeStyle = 'red';
ctx.lineWidth = 8;
ctx.strokeRect(50, 50, 100, 100);
// Dashed blue rectangle
ctx.strokeStyle = 'blue';
ctx.lineWidth = 3;
ctx.setLineDash([5, 3]);
ctx.strokeRect(200, 50, 100, 100);
ctx.setLineDash([]); // Reset dash pattern
// Rounded corners rectangle
ctx.strokeStyle = 'green';
ctx.lineWidth = 5;
ctx.lineJoin = 'round';
ctx.strokeRect(50, 200, 100, 100);
</script>
</body>
</html>
此示例绘制了三个具有不同描边自定义的矩形。第一个矩形具有粗红边框，第二个矩形使用虚线蓝色图案。
第三个矩形使用 lineJoin 属性演示了圆角。每个矩形都展示了描边自定义功能的不同方面。
多个 strokeRect 调用
本示例展示了如何使用一次描边调用绘制多个矩形。
<!DOCTYPE html>
<html>
<head>
<title>Multiple strokeRect Calls</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'purple';
ctx.lineWidth = 4;
// Draw grid of rectangles
for (let x = 0; x < 5; x++) {
for (let y = 0; y < 4; y++) {
ctx.strokeRect(50 + x * 90, 50 + y * 90, 80, 80);
}
}
</script>
</body>
</html>
此代码使用嵌套循环创建了一个 5x4 的紫色矩形网格。每个矩形尺寸为 80x80 像素，它们之间的间距为 10 像素。
该示例演示了如何在循环中有效使用 strokeRect 来创建复杂图案。所有矩形都共享相同的描边属性。
动画 strokeRect
本示例使用 strokeRect 和 requestAnimationFrame 动画化矩形轮廓。
<!DOCTYPE html>
<html>
<head>
<title>Animated strokeRect</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let size = 10;
let growing = true;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = 'orange';
ctx.lineWidth = 5;
ctx.strokeRect(
canvas.width/2 - size/2,
canvas.height/2 - size/2,
size, size
);
if (growing) {
size += 2;
if (size > 200) growing = false;
} else {
size -= 2;
if (size < 10) growing = true;
}
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
此动画创建了一个不断增长和收缩的矩形。矩形位于 canvas 中心，并在 10 像素和 200 像素之间脉动。
动画循环在每一帧清除 canvas 并使用更新后的尺寸重绘矩形。growing 布尔值控制尺寸变化的 G 方向。
交互式 strokeRect
本示例创建了一个跟随鼠标移动的交互式矩形。
<!DOCTYPE html>
<html>
<head>
<title>Interactive strokeRect</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let mouseX = 0;
let mouseY = 0;
canvas.addEventListener('mousemove', (e) => {
mouseX = e.clientX - canvas.offsetLeft;
mouseY = e.clientY - canvas.offsetTop;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = 'rgba(0, 100, 255, 0.7)';
ctx.lineWidth = 8;
ctx.strokeRect(mouseX - 50, mouseY - 50, 100, 100);
});
</script>
</body>
</html>
此代码创建了一个跟随鼠标光标的蓝色矩形。矩形围绕鼠标位置居中，宽度和高度均为 100 像素。
mousemove 事件会更新矩形位置。clearRect 方法确保一次只有一个矩形在移动时可见。
来源
本教程涵盖了从基本到高级的 strokeRect 方法用法。这些示例演示了如何在 HTML canvas 上创建静态、动画和交互式矩形轮廓。
作者
列出 所有 JS Canvas 教程。