让我们从创建第一个Canvas程序开始，创建你的第一个Canvas程序，从零开始学习Canvas绑制，在实践中学习Canvas的基本用法。
首先，在HTML中添加canvas元素：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个Canvas程序</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300">
您的浏览器不支持Canvas
</canvas>
</body>
</html>
几个注意点：
width和height属性定义画布尺寸（单位：像素）Canvas本身只是一个容器，绑制操作需要通过"上下文"完成：
const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')
getContext('2d')返回一个2D绑制上下文对象，它提供了所有绑制方法。
让我们在画布上绑制一个简单的矩形：
const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')
// 设置填充颜色
ctx.fillStyle = '#3498db'
// 绑制填充矩形（x, y, width, height）
ctx.fillRect(50, 50, 200, 100)
效果：在坐标(50, 50)位置绑制一个200x100像素的蓝色矩形。
下面是一个完整的示例，包含多个图形：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>第一个Canvas程序</title>
<style>
canvas {
border: 1px solid #ccc;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')
// 绑制背景
ctx.fillStyle = '#f5f5f5'
ctx.fillRect(0, 0, 400, 300)
// 绑制红色矩形
ctx.fillStyle = '#e74c3c'
ctx.fillRect(30, 30, 100, 80)
// 绑制绿色矩形
ctx.fillStyle = '#2ecc71'
ctx.fillRect(150, 30, 100, 80)
// 绑制蓝色矩形
ctx.fillStyle = '#3498db'
ctx.fillRect(270, 30, 100, 80)
// 绑制文字
ctx.fillStyle = '#333'
ctx.font = '16px Arial'
ctx.fillText('这是我的第一个Canvas程序', 100, 150)
// 绑制圆形
ctx.beginPath()
ctx.arc(200, 220, 50, 0, Math.PI * 2)
ctx.fillStyle = '#9b59b6'
ctx.fill()
</script>
</body>
</html>
设置填充颜色，可以使用：
ctx.fillStyle = 'red' // 颜色名称
ctx.fillStyle = '#ff0000' // 十六进制
ctx.fillStyle = 'rgb(255,0,0)' // RGB
ctx.fillStyle = 'rgba(255,0,0,0.5)' // RGBA（带透明度）
绑制填充矩形：
ctx.fillRect(x, y, width, height)
// x: 左上角x坐标
// y: 左上角y坐标
// width: 宽度
// height: 高度
绑制圆形需要先开始路径：
ctx.beginPath() // 开始新路径
ctx.arc(x, y, radius, startAngle, endAngle) // 画圆弧
ctx.fill() // 填充
绑制文字：
ctx.font = '16px Arial' // 设置字体
ctx.fillText('文字内容', x, y) // 绑制文字
// 错误：用CSS设置尺寸会导致图形变形
canvas.style.width = '400px'
canvas.style.height = '300px'
// 正确：使用属性设置
canvas.width = 400
canvas.height = 300
// 错误：canvas还不存在
const ctx = document.getElementById('myCanvas').getContext('2d')
// 正确：等待DOM加载完成
window.onload = function() {
const ctx = document.getElementById('myCanvas').getContext('2d')
}
// 或者把script放在canvas后面
// 错误：canvas元素没有绑制方法
const canvas = document.getElementById('myCanvas')
canvas.fillRect(0, 0, 100, 100) // 报错！
// 正确：通过上下文绑制
const ctx = canvas.getContext('2d')
ctx.fillRect(0, 0, 100, 100)
尝试用学到的知识绑制一个笑脸：
const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')
// 脸部
ctx.beginPath()
ctx.arc(200, 150, 80, 0, Math.PI * 2)
ctx.fillStyle = '#f1c40f'
ctx.fill()
// 左眼
ctx.beginPath()
ctx.arc(170, 120, 10, 0, Math.PI * 2)
ctx.fillStyle = '#333'
ctx.fill()
// 右眼
ctx.beginPath()
ctx.arc(230, 120, 10, 0, Math.PI * 2)
ctx.fill()
// 嘴巴
ctx.beginPath()
ctx.arc(200, 160, 40, 0.1 * Math.PI, 0.9 * Math.PI)
ctx.strokeStyle = '#333'
ctx.lineWidth = 3
ctx.stroke()
在浏览器开发者工具中：
// 将画布内容转为图片
const dataURL = canvas.toDataURL()
console.log(dataURL) // base64格式的图片数据
// 在新窗口打开
window.open(dataURL)