HTML5 Canvas画矩形方法详解

想轻松掌握HTML5 Canvas中矩形绘制的全部技巧？本文系统详解四种核心方法：用fillRect()一键填充实心矩形、用strokeRect()快速勾勒边框、用rect()配合路径操作实现灵活样式控制，以及用clearRect()精准擦除局部区域——无论你是初学者还是进阶开发者，都能从中获得清晰、实用、即学即用的Canvas绘图能力。

如果您希望在网页中使用HTML5 Canvas绘制矩形图形，则需要通过Canvas的2D绘图上下文调用特定的矩形绘制方法。以下是实现该目标的多种方式：

一、使用fillRect()绘制实心矩形

fillRect()方法用于在Canvas上直接绘制并填充一个实心矩形，它不依赖路径，执行后立即渲染，适合快速绘制单色填充区域。

1、在HTML中创建元素，并设置其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 Canvas画矩形方法详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！