Sprite Sheet
精灵图(图像图集)
将多个较小图像排列在网格中组合成单个图像文件,使浏览器或游戏引擎可以通过使用坐标高效选择单个精灵。
技术细节
精灵图通过将多个图标或动画帧合并到一个文件中来减少HTTP请求。CSS精灵使用background-position来显示正确的图标。现代替代方案:SVG精灵(使用
示例
```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)
```