当前位置：首页 > news >正文

Canvas基础篇：绘制矩形

news 来源：原创 2025/4/30 9:53:24

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

效果预览

示例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

效果预览

示例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>