本地网站怎么做优秀的网页设计案例
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)
边框矩形效果预览
边框矩形代码实现
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>边框矩形</title></head><body><canvas id="canvas" width="600" height="600"></canvas><script>function load() {// 获取画布元素let canvas = document.getElementById('canvas')// 获取上下文对象let ctx = canvas.getContext("2d");// 绘制边框矩形ctx.strokeRect(10, 10, 100, 100);}load()</script></body>
</html>
填充矩形fillRect
fillRect() 通过填充的方式绘制一个实心矩形，其语法与rect() 方法一致：
fillRect(x, y, width, height)
填充矩形效果预览
填充矩形代码实现
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>填充矩形</title></head><body><canvas id="canvas" width="600" height="600"></canvas><script>function load() {// 获取画布元素let canvas = document.getElementById('canvas')// 获取上下文对象let ctx = canvas.getContext("2d");// 绘制填充矩形ctx.fillRect(10, 10, 100, 100);}load()</script></body>
</html>
清除矩形clearRect
clearRect() 方法用于清除指定矩形区域，简单来说就是：在指定位置创建一个透明的矩形，覆盖原有的图形，看起来这部分图形好像被”清除“了，其语法与rect() 方法一致：
clearRect(x, y, width, height)
清除矩形的效果不好展示，下面我将通过一个综合实例，来更清楚地展示描边矩形、填充矩形和清除矩形的效果与区别。
综合实例1
效果预览
实现代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>矩形实例1</title></head><body><canvas id="canvas" width="600" height="600"></canvas><script>function load() {// 获取画布元素let canvas = document.getElementById('canvas')// 获取上下文对象let ctx = canvas.getContext("2d");// 绘制矩形ctx.strokeRect(10, 10, 500, 500)ctx.fillRect(25, 25, 470, 470)ctx.clearRect(40, 40, 440, 440)ctx.fillRect(55, 55, 410, 410)ctx.clearRect(70, 70, 380, 380)ctx.fillRect(85, 85, 350, 350)ctx.clearRect(100, 100, 320, 320)}load()</script></body>
</html>
上述代码中，矩形的位置和宽高是手动设置的，现在我们来写个js方法，让代码更友好：
综合实例2
效果预览
代码实现
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>矩形实例2</title></head><body><canvas id="canvas" width="600" height="600"></canvas><script>function load() {// 获取画布元素let canvas = document.getElementById('canvas')// 获取上下文对象let ctx = canvas.getContext("2d")// 设置初始位置和初始宽度let startX = 10let startY = 10let width = 500let height = 500// 设置步长 两个可见矩形见的间距const step = 15for (let i = 0; width > 30 && height > 30; i++) {if (i === 0) {// 第一个矩形是边框矩形ctx.strokeRect(startX, startY, width, height)}// 先绘制填充矩形ctx.fillRect(startX + step / 2, startY + step / 2, width - step, height - step);// 计算下一个矩形的起始点和宽高startX += stepstartY += stepwidth -= 2 * stepheight -= 2 * stepif (width > 15 && height > 15) {// 再将填充矩形内部清除ctx.clearRect(startX, startY, width, height)}}}load();</script></body>
</html>结语
本文主要介绍了Canvas中矩形的几种绘制方式，对于文章中错误的地方或者有任何问题，欢迎在评论区留言分享！