（挥舞电子画笔）同学们，上节课我们给视频加了野生弹幕，现在要解锁浏览器的灵魂画手模式啦！准备好用代码在网页上涂鸦了吗？

8.4 画布(canvas)基础

8.4.1 网页里的魔法黑板

<canvas>标签就像给浏览器发了个画板，不过刚拆封时是块白板：

<canvas id="myCanvas" width="600" height="400" 
        style="border:2px solid #ccc">
  你的浏览器还在用石器时代画板
</canvas>

（温馨提示：用CSS设置画布大小会像拉伸图片一样糊掉，要用width/height属性！）

8.4.2 获取绘图超能力

画布操作像在玩RPG游戏，要先获取「2D画笔」这个装备：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // 召唤2D画笔

// 画个警告色矩形
ctx.fillStyle = '#ff0000';
ctx.fillRect(50, 50, 200, 150); // X坐标,Y坐标,宽度,高度

8.4.3 基础绘图咒语手册

常用API比美图秀秀工具还丰富：

// 画线模式
ctx.beginPath();          // 起笔
ctx.moveTo(100, 100);     // 落笔点
ctx.lineTo(300, 200);     // 连线到
ctx.strokeStyle = 'blue'; // 线颜色
ctx.lineWidth = 5;        // 线粗细
ctx.stroke();             // 执行绘制

// 画圆大法
ctx.beginPath();
ctx.arc(400, 150, 60, 0, Math.PI * 2); // 圆心X,Y 半径 起始角 结束角
ctx.fillStyle = 'rgba(0,255,0,0.5)';   // 半透明绿色
ctx.fill();

// 文字魔法
ctx.font = '30px Arial';
ctx.fillStyle = 'purple';
ctx.fillText('Hello Canvas!', 50, 380);

8.4.4 实战：画个会眨眼的笑脸

<canvas id="smileFace" width="400" height="400"></canvas>

<script>
function drawFace() {
  const ctx = document.getElementById('smileFace').getContext('2d');
  
  // 清空画布
  ctx.clearRect(0, 0, 400, 400);

  // 画脸
  ctx.beginPath();
  ctx.arc(200, 200, 150, 0, Math.PI * 2);
  ctx.fillStyle = '#FFD700';
  ctx.fill();

  // 眼睛（随机眨眼）
  drawEye(140, 160);
  drawEye(260, 160);

  // 嘴巴
  ctx.beginPath();
  ctx.arc(200, 240, 80, 0, Math.PI);
  ctx.lineWidth = 5;
  ctx.stroke();
}

function drawEye(x, y) {
  const ctx = document.getElementById('smileFace').getContext('2d');
  ctx.beginPath();
  ctx.arc(x, y, 30, 0, Math.PI * 2);
  ctx.fillStyle = 'white';
  ctx.fill();
  
  // 随机眨眼效果
  if(Math.random() > 0.8) { // 20%概率眨眼
    ctx.beginPath();
    ctx.arc(x, y+15, 15, 0, Math.PI);
    ctx.lineWidth = 3;
    ctx.stroke();
  } else {
    ctx.beginPath();
    ctx.arc(x, y-10, 15, 0, Math.PI * 2);
    ctx.fillStyle = 'black';
    ctx.fill();
  }
}

// 每0.5秒重绘一次
setInterval(drawFace, 500);
</script>

8.4.5 新手避坑指南

1. 路径遗忘症：每次画新图形前要beginPath()，否则样式会串台
2. 坐标系混乱：画布的(0,0)点在左上角，和数学坐标系相反
3. 性能陷阱：频繁重绘整个画布会让电脑风扇狂转（可用脏矩形优化）

高清屏模糊：通过缩放解决视网膜屏模糊：

const scale = window.devicePixelRatio;
canvas.width = 600 * scale;
canvas.height = 400 * scale;
canvas.style.width = "600px";
ctx.scale(scale, scale);

1. 内存泄漏：动画记得用requestAnimationFrame，别用setInterval硬怼

（掏出调色板）下节课我们将解锁canvas动画技能！猜猜怎么用代码让这个笑脸跳科目三？