2023年微信小程序API 绘图clearRect（在给定的矩形区域内，清除画布上的像素）
作者: --时间: 2025-06-27 03:42:58
阅读量：
掌握微信小程序API 绘图clearRect（在给定的矩形区域内，清除画布上的像素）是小程序开发中非常重要的一部分。以下是对该API的详细介绍和应用：
1. 定义
clearRect() 方法用于清除画布上指定矩形区域内的内容。
Tip: clearRect 并不是在指定区域画一个白色矩形，而是实现真正的清空。为了直观感受，在canvas加入了一层背景色。
<canvas canvas-id="myCanvas" style="border: 1px solid; background: #123456;"/>
2. 参数
| 参数 | 类型 | 说明 |
|---|---|---|
| x | Number | 矩形区域左上角的x坐标 |
| y | Number | 矩形区域左上角的y坐标 |
| width | Number | 矩形区域的宽度 |
| height | Number | 矩形区域的高度 |
3. 例子
const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(0, 0, 150, 200)
ctx.setFillStyle('blue')
ctx.fillRect(150, 0, 150, 200)
ctx.clearRect(10, 10, 150, 75)
ctx.draw()
以上代码中，首先创建了画布上下文ctx，并使用setFillStyle()方法设置填充颜色，用fillRect()方法绘制两个矩形。然后使用clearRect()方法清空两个矩形中重叠的区域。最后使用draw()方法将画布内容显示出来。
这样清除指定区域内的像素，能够让开发者更好地实现特效和动画效果。同时，也能够更加优化小程序性能，减少不必要的计算和资源占用。
总之，掌握clearRect()方法的应用，有助于提高小程序开发的效率和质量。
