在Javascript中复制和裁剪图像

我正在尝试用Javascript/Canvas创建一个由几个动画精灵组成的小2D游戏。我想减少HTTP请求的数量，所以我将每帧动画（32px×32px）组合成每个精灵的一个图像（比如说，192px×128px）。有没有办法把这些图片从客户端复制并裁剪成几个较小的图片？它将极大地简化我的渲染代码，并有助于减少由于网络延迟而导致的加载时间。

请特别注意。

HTML5画布API提供了一种称为drawImage的方法，允许您裁剪输入图像

context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

有关详细信息，请参见等级库（该图像直接取自等级库）：

---

如果不想使用canvas或第三方库，可以将图像添加到裁剪版本大小的div（带有“overflow:hidden”）中，并为图像提供负的左上边距。
每一个都会携带整个图像，但只会显示其中的一部分，这可能会——也可能不会——影响性能。我相信你可能必须给div元素一个位置：亲戚，以及让IE高兴

---

或者，您可以将图像指定为div的背景，并指定backgroundPosition。我似乎记得我做过一次，但不知道为什么。（我认为这与不透明度有关）

只需将图像加载到img标记中，并将style属性display设置为hidden。然后在屏幕外画布上裁剪图像，然后根据需要将屏幕外画布写入主画布

这就是我现在正在做的。我只是想知道是否有办法在绘制图像之前裁剪图像以简化渲染代码。如果您唯一关心的是简化代码，那么您可以将图像数据封装到一个可重用的对象中，如下所示：我仍在处理它，但为了让您了解我的位置，这里的来源是：我以前从未见过这种情况，我会调查的。谢谢。考虑到这个问题是在创建一个JavaScript/canvas游戏的背景下提出的，我不确定这是否相关？很公平，我想我认为提到canvas是因为他认为这是必要的。但是，使用canvas很容易复制图像的一部分，我想知道为什么需要pixastic库……虽然提到了canvas，但这项任务并不需要JavaScript中的canvas，这是一个方便的信息。当老年人提出问题时，他们并不总是知道什么是可用的或不可用的。这也有助于其他人张贴在这里。