Canvas绑制基本形状教程，包括矩形、圆形、椭圆、直线、三角形、多边形的绑制方法，包含多个交互式案例。
Canvas提供了多种绑制基本形状的方法。掌握这些方法是学习Canvas的第一步，也是后续复杂图形绑制的基础。
形状绑制概述
Canvas中的形状分为两类：
| 类型 | 方法 | 特点 |
|---|
| 直接绑制 | fillRect、strokeRect、clearRect | 一步完成，无需路径 |
| 路径绑制 | arc、rect、lineTo等 | 需要beginPath和fill/stroke |
案例一：基本形状展示
Canvas基本形状
代码实现
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')
ctx.fillStyle = '#e74c3c'
ctx.fillRect(20, 30, 70, 50)
ctx.strokeStyle = '#3498db'
ctx.lineWidth = 3
ctx.strokeRect(110, 30, 70, 50)
ctx.beginPath()
ctx.arc(235, 55, 35, 0, Math.PI * 2)
ctx.fillStyle = '#2ecc71'
ctx.fill()
ctx.beginPath()
ctx.ellipse(340, 55, 40, 25, 0, 0, Math.PI * 2)
ctx.fillStyle = '#f39c12'
ctx.fill()
ctx.beginPath()
ctx.moveTo(60, 150)
ctx.lineTo(30, 180)
ctx.lineTo(90, 180)
ctx.closePath()
ctx.fillStyle = '#9b59b6'
ctx.fill()
</script>
代码解析
| 形状 | 方法 | 说明 |
|---|
| 矩形 | fillRect(x, y, w, h) | 直接绑制，无需路径 |
| 圆形 | arc(x, y, r, 0, 2π) | 需要beginPath |
| 椭圆 | ellipse(x, y, rx, ry, ...) | 需要beginPath |
| 三角形 | moveTo + lineTo + closePath | 路径绑制 |
案例二：形状组合 - 小房子
组合形状绘制小房子
代码实现
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')
ctx.fillStyle = '#87CEEB'
ctx.fillRect(0, 0, 400, 120)
ctx.fillStyle = '#90EE90'
ctx.fillRect(0, 120, 400, 80)
ctx.fillStyle = '#DEB887'
ctx.fillRect(120, 100, 160, 100)
ctx.beginPath()
ctx.moveTo(100, 100)
ctx.lineTo(200, 40)
ctx.lineTo(300, 100)
ctx.closePath()
ctx.fillStyle = '#8B4513'
ctx.fill()
ctx.fillStyle = '#8B4513'
ctx.fillRect(180, 140, 40, 60)
ctx.fillStyle = '#87CEEB'
ctx.fillRect(135, 115, 35, 35)
ctx.fillRect(230, 115, 35, 35)
ctx.fillStyle = '#FFD700'
ctx.beginPath()
ctx.arc(50, 40, 25, 0, Math.PI * 2)
ctx.fill()
</script>
代码解析
| 部分 | 形状 | 方法 |
|---|
| 房身 | 矩形 | fillRect |
| 屋顶 | 三角形 | moveTo + lineTo + closePath |
| 门 | 矩形 | fillRect |
| 窗户 | 矩形 | fillRect |
| 太阳 | 圆形 | arc |
案例三：动态形状动画
形状动画演示
代码实现
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')
let time = 0
const shapes = [
{ type: 'rect', x: 60, y: 100, color: '#e74c3c' },
{ type: 'circle', x: 150, y: 100, color: '#3498db' },
{ type: 'triangle', x: 240, y: 100, color: '#2ecc71' },
{ type: 'star', x: 330, y: 100, color: '#f39c12' }
]
function drawShape(shape, offsetY, scale) {
ctx.save()
ctx.translate(shape.x, shape.y + offsetY)
ctx.scale(scale, scale)
ctx.fillStyle = shape.color
if (shape.type === 'rect') {
ctx.fillRect(-25, -25, 50, 50)
} else if (shape.type === 'circle') {
ctx.beginPath()
ctx.arc(0, 0, 30, 0, Math.PI * 2)
ctx.fill()
} else if (shape.type === 'triangle') {
ctx.beginPath()
ctx.moveTo(0, -30)
ctx.lineTo(-26, 15)
ctx.lineTo(26, 15)
ctx.closePath()
ctx.fill()
}
ctx.restore()
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height)
shapes.forEach((shape, i) => {
const offsetY = Math.sin(time + i * 0.8) * 20
const scale = 0.8 + Math.sin(time * 2 + i) * 0.2
drawShape(shape, offsetY, scale)
})
time += 0.05
requestAnimationFrame(animate)
}
animate()
</script>
代码解析
| 技术 | 说明 |
|---|
ctx.save() | 保存当前状态 |
ctx.translate() | 平移坐标原点 |
ctx.scale() | 缩放图形 |
ctx.restore() | 恢复之前状态 |
Math.sin() | 创建平滑动画效果 |
小结
基本形状绑制要点：
- 矩形是唯一可直接绑制的形状
- 其他形状需要通过路径绑制
- arc用于圆形和圆弧，ellipse用于椭圆
- 多边形可以通过循环计算顶点坐标绑制
- 复杂图形由基本形状组合而成
