Canvas绘制图片必须等Image加载完成并在onload回调中调用drawImage，且image必须为首个参数；支持3种参数形式：2参数整图定位、4参数缩放、9参数裁剪缩放；跨域需设置crossOrigin和CORS头。
Canvas 本身不自动加载图片，必须手动创建 Image 对象、等它加载完成，再用 drawImage() 绘制——关键就两点：时机对、参数对。
必须等图片加载完再画
图片加载是异步的，img.src = 'xxx.png' 执行后立刻调 drawImage()，图还没解码，画布就是空的，控制台也不报错。
- onload 必须在设置 src 前绑定，否则缓存命中时可能直接跳过事件
- 别用
img.complete判断，它只反映是否缓存，不保证已解码 - 用户上传的图片（File 或
URL.createObjectURL()）同样要走 onload 流程
drawImage() 参数不能错位
所有重载形式都要求图像对象必须是第一个参数，顺序错了图就“消失”，不是报错而是静默失败。
-
ctx.drawImage(img, x, y)：整图原尺寸，左上角落在 (x, y) -
ctx.drawImage(img, x, y, width, height)：拉伸/压缩到指定宽高（注意非等比会变形） -
ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)：先从源图裁剪区域，再贴到目标位置并缩放；9个参数易数错，建议拆成变量传入
跨域图片要注意污染问题
如果图片来自 CDN 或其他域名，后续想用 ctx.getImageData() 或 toDataURL() 导出，会触发安全错误：“Tainted canvases may not be exported”。
立即学习“前端免费学习笔记（深入）”；
- 服务端需配置
Access-Control-Allow-Origin头 - 前端
img.crossOrigin = 'anonymous'要写在src赋值前 - 即使加了 crossOrigin，若服务端没配好，仍会污染画布
拖拽图片到 Canvas 的特别处理
Canvas 不是容器，不能像 div 那样直接接收拖入的 img 元素。必须把拖放行为转为坐标+图像引用的数据结构，在渲染循环中主动绘制。
- 拖拽源
<img draggable="true">用dataTransfer.setData('text/plain', index)传索引，避免跨域或重复 URL 问题 - Canvas 的
dragover事件里必须ev.preventDefault()，否则drop不触发 -
drop中只记录图像对象和落点坐标，不要直接 draw；实际绘制放在requestAnimationFrame循环里，防止被清屏覆盖
