我可以复制一个javascript图像对象吗?

时间:2011-12-11 20:14:53

标签: javascript html5-canvas

我正在用javascript构建一个简单的游戏引擎,我现在正在为左右动画构建单独的spritesheets,但这看起来有点痛苦......我想要做的是这样的事情:< / p>

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()对象的副本,并镜像翻转它的所有像素,所以我不必维护两个spritesheets。

有可能吗?

1 个答案:

答案 0 :(得分:0)

首先,您可以使用此处描述的方法复制像素数据:Get image data in JavaScript?

我假设您正在使用具有固定大小图像的精灵表。然后,您必须编写一个算法来翻转图像表中的每个图像:

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