Canvas是HTML绘图元素，需三步使用：获取画布、获取2D上下文、调用绘图方法；图形绘制分直接矩形与路径类，动画靠requestAnimationFrame循环清空重绘；注意尺寸设置、坐标原点、beginPath()调用及上下文状态管理。

Canvas 是 HTML 中的一个绘图元素，它提供了一块空白的“画布”，通过 JavaScript 控制像素来绘制图形、图像、文字，甚至实现动画和交互效果。 它不是靠标签或 CSS 描述形状，而是用代码一步步“画”出来的——就像用画笔在纸上作画，每次调用方法都相当于一笔操作。

Canvas 的基本使用流程

要让 Canvas 工作，需三步：获取画布元素、拿到绘图上下文（2D）、调用绘图方法。

• 在 HTML 中写
• 用 JavaScript 获取：const canvas = document.getElementById('myCanvas');
• 获取 2D 绘图环境：const ctx = canvas.getContext('2d');
• 之后所有绘图操作都通过 ctx 调用，比如 ctx.fillRect(10, 10, 100, 50) 画一个实心矩形

常用图形绘制方法

Canvas 提供了基础路径与填充/描边组合，灵活但需注意“开始路径→构建路径→绘制”三步逻辑。

• 矩形：直接用 fillRect(x, y, width, height)（填充）或 strokeRect()（描边）
• 路径类图形（线、圆、多边形）：先 ctx.beginPath()，再用 moveTo()、lineTo()、arc() 等定义路径，最后 fill() 或 stroke()
• 例如画圆：ctx.beginPath(); ctx.arc(100, 100, 30, 0, Math.PI * 2); ctx.fill();
• 文字用 ctx.fillText("Hello", x, y)，支持字体、对齐、颜色等设置

Canvas 动画的核心机制

Canvas 本身不自动动，动画靠反复清空画布 + 重绘 + 微小位移实现，本质是快速连续的“重画帧”。关键用 requestAnimationFrame() 替代 setInterval，更流畅且省资源。

• 基本动画循环结构：

  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空
    // 更新数据（如 x += 2）
    // 重绘图形（如 drawBall(x, y)）
    requestAnimationFrame(animate);
  }
  animate();

• 注意清除范围要准确，避免残留；状态（位置、角度、颜色等）用变量保存并每次更新
• 复杂动画可封装对象（如 Ball 类），管理自身属性和 draw 方法

实用提示与常见坑

Canvas 强大但细节多，初学容易卡在几个地方：

• 画布尺寸必须用 width 和 height 属性设置（不是 CSS），否则会拉伸模糊
• 所有坐标原点在左上角 (0,0)，x 向右增，y 向下增
• 路径未调用 beginPath() 就续画，旧路径会一起重绘——这是很多“线条意外出现”的原因
• 颜色、线宽、字体等样式属于上下文状态，修改后会影响后续所有绘制，必要时用 save() / restore() 保护