100×100 的 canvas 占多少内存
webkit 引擎源码计算内存公式：
4 * width * height
100 * 100 canvas 占的内存是 100 * 100 * 4 bytes = 40,000 bytes（约 39 KB）。
补充
补充：4 来自 canvas 默认的 RGBA 四个通道，每个通道 1 字节；高 DPR 设备或
getContext('2d', { alpha: false })时这个值会变化。
计算方式
- RGBA 每像素 4 字节
- 内存 ≈
width × height × 4 bytes - 100×100 canvas ≈ 40,000 字节 ≈ 39 KB
不同场景下的占用
| 场景 | 每像素字节数 | 说明 |
|---|---|---|
| 普通 RGBA canvas | 4 | 默认情况 |
{ alpha: false } | 仍按 4 实现 | 浏览器实现细节决定 |
| 高 DPR 屏幕（如 devicePixelRatio=2） | 实际像素 = CSS 像素 × DPR² | 视觉大小 100×100 时实际为 200×200 |
| WebGL canvas | 由颜色缓冲等决定，通常更大 | 取决于附件与纹理 |
性能提示
- 大尺寸 canvas（如 1920×1080）单层就接近 8 MB，多层叠放会迅速耗尽显存
- 尽量复用 canvas，不要每帧重新创建
- 离屏 canvas 用
transferControlToOffscreen移到 Web Worker
来源整理自：我的有道云笔记
