html - HTML 5 画布如何从 spritemap 中提取和存储图像？

Question

我也很想知道这是否是最佳做法。

我加载一个精灵图：

canvas = $('#GameCanvas')[0];
context = canvas.getContext('2d');

// load sprite map
spriteMap = new Image();
spriteMap.src = "resources/spritemap.png";

现在我已经加载了我的精灵，我想在屏幕上绘制它们。context.drawImage(..)我可以通过使用but来做到这一点：

• 我不知道这是否是最好的方法，而不是仅仅提取我想要的每个图像并将它们单独存储，例如。var playerCharacter = [cut the image out of the sprite map]

• 我想给图像上色。如果我拉出一个“白色”精灵，我可能想要将它着色为红色、绿色等。我还不知道该怎么做，但它可能需要创建一个新的彩色Image，所以我必须拉无论如何，它都超出了精灵图。我不想不断地重新着色。

知道最好的方法吗？

Answer 1