在 html5 画布上旋转单个图像（而不是其他图像）？

我有一个精灵，我正在使用普通精灵表位块传输在 html 画布上制作动画。在某些关键事件上，我想更改精灵的方向（即翻转它或旋转 180 度），而不更改画布上的任何内容（其他精灵）。

有谁知道如何做到这一点？

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

对于每个精灵，我跟踪它在画布中当前的顶部和左侧，以及精灵表中每个单元格的顶部和左侧。

我已经看到之前的答案显示了一个简单的水平翻转，即只是平移轴的原点和翻转（反比例），BUT这没有考虑到对于精灵来说，翻转原点会弄乱精灵的注册点（画布上的顶部和左侧）。

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

// 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);
}

注意：我也可以在翻译中进行数学计算，因为它是为了简化其他地方的计算。