canvas是html5位图绘图API，核心在于控制2D上下文路径操作：获取上下文、设置样式、定义路径、调用fill/stroke渲染；动画需requestAnimationFrame循环清屏重绘。
canvas 是 html5 提供的位图绘图 API，通过 javaScript 操作 元素的 2D 上下文（getContext('2d')）就能绘制图形、实现动画。关键不是“画什么”，而是“怎么控制画笔”——设置样式、移动路径、描边填充、清屏重绘，这些才是核心。
获取上下文并设置基础画布环境
先在 HTML 中放一个 ，然后用 js 获取 2D 上下文：
const canvas = document.getElementById(‘myCanvas’);
const ctx = canvas.getContext(‘2d’);
注意：width 和 height 必须设在 HTML 属性里（不是 css），否则会拉伸失真。常见坑：CSS 设置宽高只缩放显示，不改变实际绘图分辨率。
立即学习“Java免费学习笔记（深入）”；
绘制基本图形：路径 + 样式 + 渲染
Canvas 不是“直接画圆”，而是“定义路径 → 设置样式 → 执行渲染”。所有图形都基于路径（path）操作：
- 矩形：最简单，有专用方法
ctx.fillStyle = ‘#ff6b6b’;
ctx.fillRect(50, 30, 120, 80); // 填充
ctx.strokeStyle = ‘#4ecdc4’;
ctx.lineWidth = 2;
ctx.strokeRect(50, 130, 120, 80); // 描边 - 圆形/弧线：用
arc(x, y, radius, startAngle, endAngle, anticlockwise)
ctx.beginPath();
ctx.arc(200, 150, 40, 0, math.PI * 2); // 整圆
ctx.fillStyle = ‘#ffd166’;
ctx.fill(); - 线条和多边形：用
moveTo、lineTo、closePath
ctx.beginPath();
ctx.moveTo(100, 50);
ctx.lineTo(150, 20);
ctx.lineTo(200, 50);
ctx.closePath();
ctx.fillStyle = ‘#118ab2’;
ctx.fill();
⚠️ 记住每次画新图形前调用 beginPath()，否则路径会累加；fill() 和 stroke() 才真正把路径画出来。
实现简单动画：requestAnimationFrame + 清屏 + 重绘
动画本质是“快速重复绘制变化的画面”。Canvas 没有自动刷新，必须手动控制：
- 用
requestAnimationFrame(animate)替代setTimeout，更流畅且省电 - 每一帧开始前用
ctx.clearRect(0, 0, canvas.width, canvas.height)清空画布（或用全屏背景色覆盖） - 更新图形位置/状态变量（如
x += dx），再重新绘制
例子：让小球匀速横穿画布
let x = 0;
const dx = 2;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(x, 150, 12, 0, Math.PI * 2);
ctx.fillStyle = ‘#ff9e00’;
ctx.fill();
x += dx;
if (x > canvas.width + 12 || x requestAnimationFrame(animate);
}
animate();
进阶提示：坐标变换与性能注意点
想旋转、缩放图形？别重算坐标，用 Canvas 内置变换：
-
ctx.save()/ctx.restore()保存和恢复当前绘图状态（含变换、样式等） -
ctx.translate(x, y)移动原点；ctx.rotate(angle)绕原点旋转（单位是弧度）；ctx.scale(sx, sy)缩放 - 避免每帧反复创建对象（如 new Image）、重复解析路径 —— 提前准备，复用变量
- 复杂动画考虑用
OffscreenCanvas（Worker 中预渲染）或分层 canvas（背景静止层 + 前景动态层）
基本上就这些。Canvas 不复杂但容易忽略路径管理和清屏逻辑，动手画几个矩形和小球，节奏就出来了。