高性能图片平铺与缩放的关键在于避免重复解码、减少drawimage调用开销、合理利用缓存与坐标变换：用image.decode()预解码；settransform+translate单次drawimage实现高效平铺；css transform缩放canvas元素而非重绘；离屏canvas缓存固定图层。
Canvas 实现高性能图片平铺与缩放，核心不在“重绘次数”，而在“避免重复解码、减少 drawImage 调用开销、合理利用缓存与坐标变换”。关键不是写得多，而是画得巧。
优先用 image.decode() 预加载并解码图像
浏览器默认在首次 drawImage 时才解码图片，若平铺区域大、缩放频繁，会导致卡顿。调用 image.decode() 可提前完成解码，确保后续绘制不阻塞主线程：
- 对 img 元素调用 await img.decode()（返回 Promise），解码完成后再进 Canvas 绘制流程
- 解码失败需捕获异常，降级为直接 drawImage（兼容旧浏览器）
- 适用于单图复用场景（如纹理贴图、背景平铺），避免每次 drawImage 都触发软解码
平铺：用 setTransform + 单次 drawImage 替代循环绘制
传统 for 循环调用 drawImage 绘制多个 tile，会产生大量 JS 调用和状态切换开销。更高效的做法是：
- 用 ctx.setTransform(1,0,0,1,0,0) 重置变换，再用 ctx.translate(x, y) 移动原点
- 对每个 tile 区域，仅调用 ctx.drawImage(img, 0, 0, w, h) —— 源图尺寸固定，目标区域由 translate 控制
- 进一步优化：将整个平铺区域划分为“可见视口+1格缓冲”，只绘制当前可视范围内的 tile，跳过屏幕外部分
缩放：用 CSS transform 缩放 canvas 元素本身，而非重绘内容
当需要整体缩放整张画布（如地图、图像查看器），不要反复清空重绘所有图元。应：
- 保持 canvas 内部始终以 1:1 像素比绘制（即 canvas.width/height = 显示像素尺寸）
- 通过 canvas.style.transform = 'scale(2.5)' 控制显示缩放，浏览器 GPU 加速合成，零 JS 开销
- 配合 canvas.style.transformOrigin 和鼠标事件坐标反向映射，实现精准交互
- 注意：此法不适用于需动态生成不同缩放级别细节（如瓦片地图）的场景，此时仍需按 LOD 分级绘制
混合策略：离屏 canvas 缓存高频复用图层
对于含固定背景+可变前景的复合平铺（如带网格线的图像编辑器），可分层管理：
- 创建 offscreenCanvas（或普通 canvas 元素 display:none），一次性绘制底图/网格/平铺纹理
- 主 canvas 每帧仅 drawImage(offscreenCanvas, 0, 0)，避免重复计算 tile 坐标与绘制逻辑
- 当底图参数变更（如平铺间距、颜色）时，才重新生成 offscreenCanvas
- 现代浏览器中，OffscreenCanvas 还支持 Worker 线程绘制，彻底剥离主线程压力
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
