答案：在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)的位置画一个100×80的红色矩形，我会这么写：
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尺寸。比如，你设置
以上就是canvas如何绘制矩形的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1574175.html
微信扫一扫 
支付宝扫一扫 
