Canvas绑制矩形详解，包括fillRect填充矩形、strokeRect描边矩形、clearRect清除矩形的方法，包含多个交互式案例。
矩形是Canvas中最基础的图形，也是唯一可以直接绑制的形状。Canvas提供了三个专门用于矩形操作的方法。
三个矩形方法
| 方法 | 作用 | 是否需要路径 |
|---|
| fillRect() | 填充矩形 | 否 |
| strokeRect() | 描边矩形 | 否 |
| clearRect() | 清除矩形区域 | 否 |
案例一：三种矩形方法
fillRect、strokeRect、clearRect
代码实现
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')
ctx.fillStyle = '#3498db'
ctx.fillRect(30, 30, 100, 80)
ctx.strokeStyle = '#e74c3c'
ctx.lineWidth = 4
ctx.strokeRect(160, 30, 100, 80)
ctx.fillStyle = '#2ecc71'
ctx.fillRect(290, 30, 100, 80)
ctx.clearRect(320, 50, 40, 40)
</script>
代码解析
| 方法 | 参数 | 说明 |
|---|
fillRect(x, y, w, h) | x,y: 左上角坐标 | 填充矩形 |
strokeRect(x, y, w, h) | w,h: 宽高 | 描边矩形 |
clearRect(x, y, w, h) | 同上 | 清除区域 |
案例二：圆角矩形
圆角矩形（使用arcTo）
代码实现
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')
function roundRect(x, y, w, h, r) {
ctx.beginPath()
ctx.moveTo(x + r, y)
ctx.arcTo(x + w, y, x + w, y + h, r)
ctx.arcTo(x + w, y + h, x, y + h, r)
ctx.arcTo(x, y + h, x, y, r)
ctx.arcTo(x, y, x + w, y, r)
ctx.closePath()
}
roundRect(30, 30, 100, 70, 15)
ctx.fillStyle = '#3498db'
ctx.fill()
roundRect(150, 30, 100, 70, 20)
ctx.strokeStyle = '#e74c3c'
ctx.lineWidth = 3
ctx.stroke()
</script>
代码解析
| 方法 | 说明 |
|---|
arcTo(x1, y1, x2, y2, r) | 绘制圆角，r为圆角半径 |
| 四个arcTo | 分别处理四个角 |
closePath() | 闭合路径 |
案例三：柱状图
使用矩形绑制柱状图
代码实现
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')
const data = [85, 120, 65, 140, 95]
const colors = ['#e74c3c', '#3498db', '#2ecc71', '#f39c12', '#9b59b6']
const barWidth = 50
const gap = 20
const startX = 50
const baseY = 170
const maxHeight = 130
const max = Math.max(...data)
data.forEach((value, index) => {
const x = startX + index * (barWidth + gap)
const height = (value / max) * maxHeight
const y = baseY - height
ctx.fillStyle = colors[index]
ctx.fillRect(x, y, barWidth, height)
ctx.fillStyle = '#333'
ctx.font = '14px Arial'
ctx.textAlign = 'center'
ctx.fillText(value, x + barWidth / 2, y - 10)
})
</script>
代码解析
| 步骤 | 说明 |
|---|
| 计算最大值 | 用于比例缩放 |
| 计算高度 | height = (value / max) * maxHeight |
| 绘制矩形 | fillRect(x, y, width, height) |
| 添加标签 | 使用fillText |
案例四：矩形动画
矩形动画效果
代码实现
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')
const bars = []
const count = 10
for (let i = 0; i < count; i++) {
bars.push({
x: 20 + i * 38,
width: 30,
height: 0,
targetHeight: 50 + Math.random() * 100,
color: `hsl(${i * 36}, 70%, 50%)`,
speed: 3
})
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height)
bars.forEach(bar => {
if (bar.height < bar.targetHeight) {
bar.height += bar.speed
}
const y = 180 - bar.height
ctx.fillStyle = bar.color
ctx.fillRect(bar.x, y, bar.width, bar.height)
})
requestAnimationFrame(animate)
}
animate()
</script>
代码解析
| 技术 | 说明 |
|---|
| 目标高度 | targetHeight 存储最终高度 |
| 渐进动画 | 每帧增加一点高度 |
| HSL颜色 | hsl(色相, 饱和度, 亮度) |
