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，更流畅且省资源。
立即学习“Java免费学习笔记（深入）”；
- 基本动画循环结构：
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()保护
