Canvas API基本绘图流程是：先获取2D上下文ctx=canvas.getContext('2d')，再显式设置canvas.width/height（非CSS），接着用路径+fill/stroke绘制图形，清空用clearRect()。
Canvas API 的基本绘图流程是啥
Canvas 绘图不是直接操作 DOM 元素，而是通过 getContext('2d') 获取一个绘图上下文对象，所有绘制操作都调用这个对象的方法。没调用 getContext 就直接画，什么都不会出现。
常见错误：只写了 ，但没加 width 和 height 属性，或用 CSS 设置尺寸——这会导致图像拉伸、模糊或坐标错乱。
- 必须显式设置
canvas.width和canvas.height（单位是像素），而不是靠 CSS -
getContext('2d')返回的上下文对象是唯一绘图入口，后续所有操作都依赖它 - 清空画布用
ctx.clearRect(0, 0, canvas.width, canvas.height)，别用innerHTML = ''
怎么画直线、矩形和圆形
Canvas 不提供“画线”这种高阶抽象，所有图形都靠路径（path）+ 描边/填充组合实现。比如画一条线，得先 beginPath()，再 moveTo() 起点，lineTo() 终点，最后 stroke() 才真正显示。
矩形是特例，有快捷方法；圆则必须用 arc()，参数多且容易填错。
- 画实心矩形：
ctx.fillRect(x, y, width, height)；描边矩形：ctx.strokeRect(x, y, width, height) - 画圆：用
ctx.arc(centerX, centerY, radius, startAngle, endAngle)，注意角度单位是弧度，Math.PI * 2是一圈 - 画线前务必调用
ctx.beginPath()，否则旧路径会累积，导致意外连接
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 画红色圆
ctx.beginPath();
ctx.arc(100, 100, 40, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
// 画蓝色线段
ctx.beginPath();
ctx.moveTo(50, 200);
ctx.lineTo(150, 200);
ctx.strokeStyle = 'blue';
ctx.lineWidth = 3;
ctx.stroke();
为什么 drawImage() 没反应或报错
drawImage() 是 Canvas 最容易出错的 API 之一，核心问题在于图像未加载完成就调用它，或者传入了非法尺寸/坐标。
典型报错：Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0. 或干脆黑屏无内容。
- 确保图片已加载完成：监听
img.onload回调后再调用drawImage -
drawImage()有 3 种签名，最常用的是drawImage(image, dx, dy)和drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)，别把源区域和目标区域参数顺序搞混 - 用
new Image()创建的图片，必须赋值src才会触发加载，赋值前访问
width/height是 0
Canvas 在高 DPI 屏幕上模糊怎么办
Canvas 默认以 CSS 像素为单位渲染，但在 Retina 或 Windows 高缩放屏上，1 个 CSS 像素可能对应多个物理像素，导致线条发虚、文字锯齿。
本质是没对齐设备像素比（window.devicePixelRatio），需要手动缩放 canvas 的绘图坐标系。
- 读取
devicePixelRatio，按比例放大canvas.width/canvas.height，再用 CSS 把 canvas 元素缩回原尺寸 - 调用
ctx.scale(dpr, dpr)让所有绘图命令自动适配高 DPI - 缩放后，鼠标事件坐标要反向除以
dpr才能匹配画布内坐标
这个适配步骤很容易被跳过，尤其在快速原型阶段，等上线后才发现设计稿里清晰的图标在 Mac 上全是毛边。
