HTML5 Canvas绘制矩形有四种方法：一、fillRect()直接绘制实心矩形；二、strokeRect()仅绘制空心边框；三、rect()结合beginPath()与fill()/stroke()定义路径；四、clearRect()清除指定矩形区域。
如果您希望在网页中使用HTML5 Canvas绘制矩形图形，则需要通过Canvas的2D绘图上下文调用特定的矩形绘制方法。以下是实现该目标的多种方式：
一、使用fillRect()绘制实心矩形
fillRect()方法用于在Canvas上直接绘制并填充一个实心矩形，它不依赖路径，执行后立即渲染，适合快速绘制单色填充区域。
1、在HTML中创建canvas>元素，并设置其id属性，例如。
2、使用JavaScript获取该Canvas元素：const canvas = document.getElementById('myCanvas');。
立即学习“前端免费学习笔记（深入）”；
3、获取2D绘图上下文：const ctx = canvas.getContext('2d');。
4、调用fillRect(x, y, width, height)方法，其中x和y为左上角坐标，width和height为矩形宽高，例如ctx.fillRect(50, 30, 120, 80);。
5、可选：在调用前设置填充颜色：ctx.fillStyle = '#3498db';。
二、使用strokeRect()绘制空心矩形边框
strokeRect()方法用于仅绘制矩形的轮廓线，不进行填充，适用于强调边界或构建框架结构。
1、确保已获取Canvas 2D上下文对象ctx。
2、设置描边颜色：ctx.strokeStyle = '#e74c3c';。
3、设置线条宽度：ctx.lineWidth = 3;。
4、调用strokeRect(x, y, width, height)，例如ctx.strokeRect(200, 100, 90, 60);。
5、该方法独立于路径系统，无需beginPath()或stroke()配合即可生效。
三、使用rect()结合fill()或stroke()绘制矩形路径
rect()方法将矩形定义为当前路径的一部分，后续可通过fill()或stroke()分别实现填充或描边，支持更复杂的路径组合与样式控制。
1、获取Canvas 2D上下文ctx。
2、开始新路径：ctx.beginPath();。
3、定义矩形路径：ctx.rect(100, 150, 180, 70);。
4、若需填充，设置fillStyle后调用ctx.fill();。
5、若需描边，设置strokeStyle和lineWidth后调用ctx.stroke();。
6、注意：rect()必须配合beginPath()使用，否则可能叠加在旧路径上导致意外渲染。
四、使用clearRect()清除指定矩形区域
clearRect()用于擦除Canvas上某一块矩形范围内的所有像素，将其重置为透明背景，常用于动画帧更新或局部刷新。
1、确保已获取2D上下文ctx。
2、调用clearRect(x, y, width, height)，例如ctx.clearRect(0, 0, 50, 50);。
3、该操作不可逆，且不会受fillStyle或strokeStyle影响，始终清除为完全透明。
4、可用于覆盖之前绘制的矩形内容，实现“删除”效果。
以上就是html5如何添加矩形_HTML5 Canvas绘制矩形图形方法【矩形】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1605309.html
微信扫一扫 
支付宝扫一扫 
![将 char[] 转换为 List：Arrays.asList() 的正确用法](https://www.chuangxiangniao.com/wp-content/uploads/2025/10/176023356598268-480x300.jpg)
