我正在尝试用 Javascript/Canvas 创建一个包含多个动画精灵的小型 2D 游戏。我想减少 HTTP 请求的数量，所以我将每一帧动画（32 像素 x 32 像素）组合成每个精灵的一个图像（比如 192 像素 x 128 像素）。有什么方法可以将这些图像在客户端复制并裁剪成几个较小的图像？它将大大简化我的渲染代码，并有助于减少由于网络延迟而导致的加载时间。
【问题讨论】：
标签： javascript canvas client-side crop
HTML5 Canvas API 提供了一个名为 drawImage 的方法，允许您裁剪输入图像。
context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
有关更多信息，请参阅规范（该图像直接取自规范）：
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#images
【讨论】：
【讨论】：
只需将图像加载到 img 标签中，并将 style 属性 display 设置为 hidden。然后在屏幕外画布上裁剪图像，然后根据需要将该屏幕外画布写入主画布。
【讨论】：
如果您不想使用画布或 3rd 方库，您可以将图像添加到裁剪版本大小的 div（带有“溢出：隐藏”），并赋予图像负左和上边距.
每个都将携带整个图像，但只会显示其中的一部分，这可能会（也可能不会）影响性能。我相信你可能必须给 div 元素一个 position:relative 以及让 IE 高兴。
或者，您可以将图像指定为 div 的背景，并指定 backgroundPosition。我似乎记得这对我曾经做过的事情不起作用，不知道为什么。 （我认为这与不透明度有关）
【讨论】：