javascript - 如何将选择的图像存储到变量 JavaScript

Question

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

Answer 1

您可以做的是将您的精灵表“剪切”成一组画布。该数组的第 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);