css - 为 HTML5 canvas 解析 Sprite

Question

这个问题困扰了我好久。比如说，我需要在页面中引入布娃娃 Angular 色动画。显然，这样一个 Angular 色的每个 body 部位都是一个图像，这些图像的数量可能会很大，具体取决于 Angular 色的复杂程度和 Angular 色的数量。如果这些字符是静态的(事实上，DOM 动画仍然是可能的，但可能会慢很多)，我可以使用 CSS 背景 Sprite ，但当归结为使用 Canvas 时，似乎你必须求助于加载所有一张一张的图片，这可能会影响页面加载时间。

此外，我想使用一些允许在 Canvas 上创建持久对象的框架，例如 paper.js或 fabric.js ，并处理重绘周期。

虽然我认为编写解析器来读取字符的 XML/JSON 描述并根据坐标创建对象是一项微不足道(但耗时)的任务，但我想知道是否已经有任何此类工具创建和使用，我可能不知道。

我想使用的是这样的结构:

character : {
  image : 'characters.png',
  body : {
    head : {
      width : 40,
      height : 50,
      xOff : 50,
      yOff : 125
    }
    // Other parts follow
  }
}

是否有任何框架或游戏引擎允许从这种结构创建对象？将多个图像加载到 Canvas 中的最佳方式是什么？

感谢您的任何建议。

更新。添加了一些细节。

Answer 1

drawImage 有一个重载版本:

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
// where image: valid image
//          sx: source slice x position
//          sy: source slice y position
//          sWidth:  source slice width
//          sHeight: source slice height
//       same for dx etc.

因此您可以简单地使用与 CSS 背景 Sprite 相同的方法。

引用资料:

• MDN:Canvas tutorial: Slicing