html5 canva s 绘制矩形有四种方法：一、fillRect()直接绘制实心矩形；二、strokeRect()仅绘制空心边框；三、rect()结合 beginPath()与 fill()/stroke()定义路径；四、clearRect()清除指定矩形区域。
如果您希望在网页中使用 html5 canvas 绘制矩形图形，则需要通过 Canvas 的 2D 绘图上下文调用特定的矩形绘制方法。以下是实现该目标的多种方式：
一、使用 fillRect()绘制实心矩形
fillRect()方法用于在 Canvas 上直接绘制并填充一个实心矩形，它不依赖路径，执行后立即渲染，适合快速绘制单色填充区域。
1、在 HTML 中创建 canvas>元素，并设置其 id 属性，例如<canvas id="myCanvas" width="400" height="300"></canvas>。
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、可用于覆盖之前绘制的矩形内容，实现“删除”效果。
以上就是
