Canvas基础篇：绘制矩形
图形绘制模式矩形rect边框矩形strokeRect边框矩形效果预览边框矩形代码实现
填充矩形fillRect填充矩形效果预览填充矩形代码实现
清除矩形clearRect
综合实例1效果预览实现代码
综合实例2效果预览代码实现
结语
图形绘制模式
在之前的文章 Canvas基础篇：概述 中，介绍到Canvas支持两种形式的图形绘制：矩形和路径；还支持三种绘制模式：填充模式fill、边框模式stroke（也称：描边模式）、清除模式clear。本文将介绍矩形绘制，以及矩形在三种绘制模式中的使用。
矩形rect
在Canvas中，可以使用 rect() 方法直接绘制一个矩形，其语法如下所示：
rect(x, y, width, height)
其中，x和y分别代表矩形绘制时，左上方顶点的横/纵坐标位置，width 代表矩阵宽度，height 代表矩阵高度。 但是在使用 rect() 方法时，有一个注意点：该方法不会立刻把矩形绘制出来，必须在该方法后调用 stroke() 方法或者 fill() 方法，才会把矩形绘制出来，其效果与 strokeRect() 和fillRect() 一致，故此处不做展示。
边框矩形strokeRect
strokeRect() 通过边框描边的方式绘制一个矩形，其语法与rect() 方法一致：
strokeRect(x, y, width, height)
边框矩形效果预览
边框矩形代码实现
填充矩形fillRect
fillRect() 通过填充的方式绘制一个实心矩形，其语法与rect() 方法一致：
fillRect(x, y, width, height)
填充矩形效果预览
填充矩形代码实现
清除矩形clearRect
clearRect() 方法用于清除指定矩形区域，简单来说就是：在指定位置创建一个透明的矩形，覆盖原有的图形，看起来这部分图形好像被”清除“了，其语法与rect() 方法一致：
clearRect(x, y, width, height)
清除矩形的效果不好展示，下面我将通过一个综合实例，来更清楚地展示描边矩形、填充矩形和清除矩形的效果与区别。
综合实例1
效果预览
实现代码
上述代码中，矩形的位置和宽高是手动设置的，现在我们来写个js方法，让代码更友好：
综合实例2
效果预览
代码实现
结语
本文主要介绍了Canvas中矩形的几种绘制方式，对于文章中错误的地方或者有任何问题，欢迎在评论区留言分享！