🍋
Menu
Image

Sprite Sheet

精灵图(图像图集)

将多个较小图像排列在网格中组合成单个图像文件,使浏览器或游戏引擎可以通过使用坐标高效选择单个精灵。

技术细节

精灵图通过将多个图标或动画帧合并到一个文件中来减少HTTP请求。CSS精灵使用background-position来显示正确的图标。现代替代方案:SVG精灵(使用引用符号)、图标字体和HTTP/2多路复用。在游戏开发中,纹理图集将2D资源打包到GPU纹理中。

示例

```javascript
// Sprite Sheet: processing with Canvas API
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.drawImage(sourceImage, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// Process pixels in imageData.data (RGBA array)
```

相关工具

相关术语