Question

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

Answer 1

你可以做的是将你的spritesheet“剪切”成一个画布阵列。此数组的第i个画布包含spritesheet的第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);

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

1 个答案: