Canvas 上要画几千个元素时很卡，怎么优化？

Canvas 没有「元素」的概念，画上去就是一堆像素，任何一个点动了，通常都要把整块画布清掉重画。几千个元素每帧重画一遍，再加上频繁切换颜色、线宽这类绘图状态，一帧 16ms 很容易超。优化方向是少画、批量画、把不变的缓存起来，实在太多就把绘制挪到 Worker 或者换 WebGL。

速记要点

• Canvas 每帧通常要全量重画
• 静态和动态内容分层，背景只画一次
• 复杂图形先画到离屏 canvas，再 drawImage
• 同样式的图形合并成一次 fill，少切状态
• 还不够就 OffscreenCanvas 放 Worker，或换 WebGL

1. 为什么元素一多就卡

Canvas 2D 的一帧