在Javascript中复制和裁剪图像

Question

我正在尝试在Javascript/Canvas中创建一个小型2D游戏,其中包含几个动画精灵.我想减少HTTP请求的数量,因此我将每帧动画(32px乘32px)合并为每个精灵一个图像(例如,192px乘128px).有什么方法可以将这些图像复制并裁剪为客户端,然后再将它们剪切成几个较小的图像 它将极大地简化我的渲染代码,并有助于减少因网络延迟而导致的加载时间.

Answer 1

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

Answer 2

看看Pixastic，特别是http://www.pixastic.com/lib/docs/actions/crop。