如何将选择的图像存储到变量 JavaScript答案

【问题标题】：How do i store a selection of a image to variable JavaScript如何将选择的图像存储到变量 JavaScript
【发布时间】：2013-09-21 21:08:26
【问题描述】：

我正在制作一个 HTML 5 游戏，我有一个精灵表图像。
如何选择该图像的一部分并将它们存储到变量中，以便以后可以使用画布绘制它们？

【问题讨论】：

为什么要复制到变量中？
到变量？您应该将它们分配给元素的类。
您要复制实际的像素/图像数据，还是坐标集？
好吧，所以不是每次都写context.drawImage(SpriteSHEET, x, y, w, h, animationsData[0].positionX, animationsData[0].positionY, 170, 122);，我只想做context.drawImage(spritevar, 1,1);，问题是我不知道如何从spritesheet中获取选择并将其存储到var中跨度>

标签： javascript html variables canvas save

【解决方案1】：

您可以做的是将您的 spritesheet '剪切'成一个画布数组。该数组的第 i 个画布包含精灵表的第 i 个图像。您使用 spritesheet 图像 + 动画图像数量调用 getSheet 包含：

   function getSheets(img, imgCount) {
       var sheets = [];
       var sheetWidth = img.width/imgCount, sheetHeight=img.height;
       for (var i=0; i<imgCount; i++) {
           var newSheet = document.createElement('canvas');
           newSheet.width=sheetWidth; newShit.height=sheetHeight;
           var ctx = newSheet.getContext('2d');
           ctx.drawImage(img,i*sheetWidth,0,sheetWidth,sheetHeight,0,0,sheetWidth,sheetHeight );
           sheets.push(newSheet);
        }
       return sheets;
    }

从这一点开始，您可以将此数组存储在对象中，而不是保存动画（或直接动画实体）：

myObject.sheets = getSheets(animationImage, 6);

然后使用

context.drawImage(this.sheets[sheetIndex],x,y);

【讨论】：

谢谢，这是我一个月前一直在尝试做的事情，只是不知道怎么做。