我可以复制一个JavaScript图像对象吗？

Question

我正在用javascript构建一个简单的游戏引擎，并且当前正在为左右动画构建单独的Spritesheets，但这似乎有点痛苦...我想做的是这样的：

function loadSprite(graphic)
{    
   var left_graphic = graphic;
   var right_graphic = graphic.flip();  //Create a flipped copy of the graphic
}

// [...]

function update()
{
   if(speed>0) context.drawImage(left_graphic);
   if(speed<0) context.drawImage(right_graphic);
}

为了澄清起见，我想创建一个Image（）对象的副本，然后镜像翻转所有像素，因此不必维护两个Spritesheet。

可能吗？

Answer 1

首先，您可以使用此处描述的方法复制像素数据：使用JavaScript获取图像数据？

我假设您使用的是带有固定大小图像的Sprite表。 然后，您必须编写一种算法来翻转图像表中的每个图像：

for each image in the sheet:
  calculate sheet offset (xOffset, yOffset)
  for each pixel in half the image:
    read pixel ((x, y) + (xOffset, yOffset))
    read opposite pixel ((width - x, y) + (xOffset, yOffset))
    write on top of opposite pixel
    write opposite pixel on top of current pixel