image - 在 html5 Canvas 上旋转单个图像(而不是其他图像)？

Question

我有一个 sprite，我正在使用普通的 sprite sheet blitting 在 html Canvas 上制作动画。在某些关键事件上，我想改变 Sprite 的方向(即，翻转它，或旋转 180 度)而不改变 Canvas 上的任何东西(其他 Sprite )。

有人知道怎么做吗？

Answer 1

所以我的游戏遇到了这个问题；我有向上、向下和向左动画的单元格，但没有向右的单元格。所以我需要翻转左边的单元格来绘制右边的单元格。

对于每个 Sprite ，我会跟踪它在 Canvas 中的当前顶部和左侧，以及每个单元格在 Sprite 表中的顶部和左侧。

我已经看到以前的答案显示简单的水平翻转只是平移轴的原点和翻转(逆比例)，但是这没有考虑到 Sprite ，翻转原点会弄乱 Sprite 的注册点(它在 Canvas 上的顶部和左侧)。

此问题体现在 Sprite 被正确镜像，但它的位置因 Sprite 的宽度而偏离。我通过考虑 Sprite 的宽度来解决它。请注意我是如何使用带有 9 个参数的 CanvasRenderingContext2D.prototype.drawImage 的，因为我正在从 Sprite 表中切出一个 Sprite :

// check if we need to flip image (special case for right movement)
if(sprite.translated){
  context.save();
  context.translate(context.canvas.width, 0);
  context.scale(-1, 1);
  context.drawImage(sprite.sheet,
    cell.left,
    cell.top,
    sprite.width,
    sprite.height,
    // secret sauce: change the destination's X registration point
    context.canvas.width - sprite.left - sprite.width,
    sprite.top,
    sprite.width, sprite.height);
  context.restore();
} else {
  // Assumes cells are all the same width and height, set in sprite
  context.drawImage(sprite.sheet, cell.left, cell.top, sprite.width,
  sprite.height, sprite.left, sprite.top, sprite.width, sprite.height);
}

注意:我也可以在翻译中完成数学运算，因为它旨在简化其他地方的计算。