Canvas绘图需先获取元素再调用getContext('2d')，返回null则不支持；所有图形通过路径+填充/描边实现，须调用beginPath()防复用；动画用requestAnimationFrame配合clearRect()实现流畅重绘。
Canvas 是浏览器内置的位图画布，不是 DOM 元素，不能直接用 CSS 控制样式或响应鼠标事件——所有绘制必须通过 JavaScript 调用 getContext('2d') 获取绘图上下文后手动完成。
怎么获取 Canvas 绘图上下文并确认是否可用
必须先拿到 元素，再调用 getContext('2d')。如果返回 null，说明浏览器不支持或类型写错（比如误写成 '2D' 或 'webgl' 但没检查返回值）。
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
if (!ctx) {
console.error('2D context not supported');
}-
getContext('2d')返回的是一个状态机对象，所有绘图操作都依赖它当前的属性（如fillStyle、lineWidth） - 不要在每次绘制时重复调用
getContext，缓存ctx变量即可 - Canvas 的宽高必须用
canvas.width/canvas.height设置（CSS 缩放会拉伸图像，不改变实际分辨率）
怎么画矩形、圆形和路径（非 SVG 方式）
Canvas 没有“画一个圆”这样的独立命令，所有图形都靠路径（path）+ 填充/描边组合实现。常见错误是忘记调用 beginPath()，导致上一次路径被意外复用。
ctx.fillStyle = '#ff6b6b'; ctx.fillRect(10, 10, 100, 50); // 直接填充矩形，不走路径ctx.beginPath(); ctx.arc(150, 150, 40, 0, Math.PI * 2); // 圆心 x/y、半径、起始/结束弧度 ctx.fill();
ctx.beginPath(); ctx.moveTo(200, 50); ctx.lineTo(250, 100); ctx.lineTo(200, 150); ctx.closePath(); ctx.stroke();
-
fillRect()和strokeRect()是快捷方法，不依赖路径，适合简单形状 -
arc()的角度单位是弧度，不是度数；Math.PI * 2= 360° - 每次调用
beginPath()都会清空当前路径，漏掉它会导致多个图形连成一条线
怎么实现流畅动画（避免卡顿和残留）
Canvas 动画本质是「清屏 → 绘制 → 重绘」循环。卡顿通常因为没用 requestAnimationFrame，残留则是因为没清空画布。
立即学习“Java免费学习笔记（深入）”；
function animate() {
// 清除整个画布（最简单方式）
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 更新位置、绘制
x += dx;
y += dy;
ctx.fillStyle = 'blue';
ctx.fillRect(x, y, 20, 20);
requestAnimationFrame(animate);
}
animate();
-
clearRect()比fillRect(0,0,w,h)更高效，且不会受当前fillStyle影响 - 不要用
setTimeout或setInterval驱动动画，它们不与屏幕刷新同步，容易掉帧 - 复杂动画中，只清除需要更新的区域（局部
clearRect）比全屏清除更省性能，但需自己计算脏区
Canvas 的核心约束很明确：它不保存图形对象，只记录像素。这意味着你无法直接点击某个圆形触发事件，也不能单独修改某条线的颜色——所有交互和状态都得自己用 JS 管理。这点和 SVG 完全不同，选型前务必想清楚需求边界。
