答案：在HTML5 Canvas上绘制矩形需获取2D上下文，使用fillRect()填充、strokeRect()描边、clearRect()清除；通过fillStyle、strokeStyle、lineWidth等属性控制颜色与边框，结合路径方法可绘制圆角矩形，并需注意Canvas坐标系及实际尺寸与CSS尺寸的差异以避免显示异常。
要在HTML5 Canvas上绘制矩形，核心是利用其2D渲染上下文提供的方法。最直接的莫过于
fillRect()和
strokeRect()，前者填充矩形，后者只绘制边框。如果你想清除某个区域，
clearRect()也同样以矩形为单位。
解决方案
说起在Canvas上画矩形，其实这事儿挺基础，但又无处不在。我个人觉得，理解这几个基本方法，几乎就打开了Canvas绘图的大门。
我们通常会先获取Canvas元素，然后拿到它的2D渲染上下文。这上下文就像你的画笔和颜料盒。
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');拿到
ctx之后，画矩形就简单了。
-
填充矩形 (
fillRect(x, y, width, height)
): 这是最常用的，直接画一个实心的矩形。x
和y
是矩形左上角的坐标，width
和height
自然就是宽度和高度了。比如，我想在(50, 50)的位置画一个100x80的红色矩形，我会这么写：ctx.fillStyle = 'red'; // 设置填充颜色 ctx.fillRect(50, 50, 100, 80);
这里有个小细节，
fillStyle
是全局的，你设置一次，后续的填充操作都会用这个颜色，直到你改它。 -
绘制矩形边框 (
strokeRect(x, y, width, height)
): 如果你只是想要一个空心的矩形框，strokeRect
就派上用场了。参数和fillRect
一样。ctx.strokeStyle = 'blue'; // 设置边框颜色 ctx.lineWidth = 2; // 设置边框宽度 ctx.strokeRect(200, 50, 100, 80);
strokeStyle
和lineWidth
也是类似的，它们控制边框的颜色和粗细。 -
清除矩形区域 (
clearRect(x, y, width, height)
): 有时候，你画错了，或者想做动画，需要擦掉一部分内容。clearRect
就是你的橡皮擦，它会把指定区域内的所有像素都变成透明。// 假设之前画了一个大矩形，现在想清除中间一块 ctx.clearRect(70, 70, 60, 40);
这在做动画时特别有用，每一帧开始前，我们通常会用
clearRect
把整个Canvas清空，再重新绘制。当然，只清除需要更新的部分，性能会更好些。
我发现很多初学者会混淆这几个，其实它们各司其职，理解它们的功能边界，用起来就顺手多了。
Canvas绘制矩形时，如何精细控制颜色、边框样式和圆角？
这确实是个好问题，因为光是画个方块，很多时候是不够的。我们希望它有特定的颜色，边框粗细，甚至圆角。
对于颜色和边框，前面提到了
ctx.fillStyle和
ctx.strokeStyle。它们不仅接受CSS颜色字符串（如
'red',
'#FF0000',
'rgb(255,0,0)'），还能接受渐变（
createLinearGradient,
createRadialGradient）和图案（
createPattern）。这给了我们极大的灵活性。
// 渐变填充 const gradient = ctx.createLinearGradient(0, 0, 100, 0); gradient.addColorStop(0, 'purple'); gradient.addColorStop(1, 'orange'); ctx.fillStyle = gradient; ctx.fillRect(50, 150, 100, 80); // 虚线边框 ctx.strokeStyle = 'green'; ctx.lineWidth = 3; ctx.setLineDash([5, 5]); // 设置虚线模式：5像素实线，5像素空白 ctx.strokeRect(200, 150, 100, 80); ctx.setLineDash([]); // 记得用完清空，否则会影响后续的线条绘制
至于圆角矩形，Canvas原生并没有直接提供
roundRect()这样的方法（虽然最新的标准已经有了，但兼容性还没那么好）。所以，我们通常需要自己动手，通过路径（Path）来绘制。这稍微复杂一点，但非常常用。
function drawRoundRect(ctx, x, y, width, height, radius) {
ctx.beginPath(); // 开始一条新路径
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.arcTo(x + width, y, x + width, y + radius, radius); // 右上角
ctx.lineTo(x + width, y + height - radius);
ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius); // 右下角
ctx.lineTo(x + radius, y + height);
ctx.arcTo(x, y + height, x, y + height - radius, radius); // 左下角
ctx.lineTo(x, y + radius);
ctx.arcTo(x, y, x + radius, y, radius); // 左上角
ctx.closePath(); // 闭合路径
}
// 绘制一个带圆角的填充矩形
ctx.fillStyle = '#FFD700'; // 金色
drawRoundRect(ctx, 50, 250, 100, 80, 10);
ctx.fill();
// 绘制一个带圆角的边框矩形
ctx.strokeStyle = '#4682B4'; // 钢蓝色
ctx.lineWidth = 2;
drawRoundRect(ctx, 200, 250, 100, 80, 15);
ctx.stroke();你会发现，一旦涉及到更复杂的形状，路径操作
beginPath(),
lineTo(),
arcTo(),
closePath(),
fill(),
stroke()就成了核心。这其实是Canvas绘图的精髓，把所有图形都看作是一系列路径的组合。
理解Canvas坐标系统和尺寸：绘制矩形时的基础与陷阱
没错，坐标系统和尺寸，这真的是Canvas绘图的基石。我见过不少人，包括我自己刚开始的时候，总是在这里犯迷糊。
Canvas的坐标系统是一个二维直角坐标系，原点
(0,0)位于Canvas的左上角。X轴正方向向右，Y轴正方向向下。这和数学上常见的Y轴向上有些不同，所以刚接触时需要适应一下。
当你说
fillRect(50, 50, 100, 80)时，它意味着：
- 矩形的左上角在
(50, 50)
这个像素点。 - 从
(50, 50)
开始，向右延伸100个像素（宽度）。 - 从
(50, 50)
开始，向下延伸80个像素（高度）。
一个常见的“陷阱”是关于Canvas元素的CSS尺寸和实际绘图尺寸。HTML中，
@@##@@标签你可以用CSS设置
width和
height，但Canvas不行。Canvas有两个尺寸：
- HTML属性尺寸 (): 这是Canvas内部绘图区域的实际像素尺寸。所有绘图操作都基于这个尺寸。
-
CSS样式尺寸 (
canvas { width: 800px; height: 600px; }): 这是Canvas元素在浏览器中显示的尺寸。
如果这两个尺寸不一致，Canvas内部的绘图内容会被缩放以适应CSS尺寸。比如，你设置
