Javascript 如何在不同方向多次绘制一幅图像？

我有一个这样的数组，其想法是输出不同方向的图像，并通过缩放在画布上垂直和水平翻转它们

[{  
  "pos":{  
      "x":411,
      "y":401.5
  },
  "scale":{  
      "x":1,
      "y":1
  }
},{  
  "pos":{  
      "x":411,
      "y":271.59625
  },
  "scale":{  
      "x":-1,
      "y":1
  }
}]

问题是我在缩放画布而不是图像，画布比我放置的图像大很多倍

  images.forEach((image) => {
    // center borde köars innan loopen egentligen
    let pos = center(image.pos)
    cc.save()
    cc.scale(image.scale.x, image.scale.y)
    cc.drawImage(window.video, pos.x, pos.y)
    cc.restore()
  })

---

如何缩放名为window.video的图像，而不是整个画布？

编辑：如下所述，这不适用于负值

drawImage可以使用两个额外的参数来调整图像大小，因此以下操作应该有效：

images.forEach((image) => {
  // center borde köars innan loopen
  let pos = center(image.pos)
  cc.save()
  cc.drawImage(window.video, pos.x, pos.y, window.video.width * image.scale.x, window.video.height * image.scale.y)
  cc.restore()
})

---

文档：

在画布上渲染缩放图像

function drawImage(image,x,y,scaleX,scaleY){
    ctx.setTransform(scaleX, 0, 0, scaleY, x, y); // set scale and translation
    ctx.drawImage(image,0,0);
}

// when done drawing images you need to reset the transformation back to default
ctx.setTransform(1,0,0,1,0,0); // set default transform

如果要翻转图像但仍在相同的左上角位置绘制，请使用

function drawImage(image, x, y, scaleX, scaleY){
    ctx.setTransform(scaleX, 0, 0, scaleY, x, y); // set scale and translation
    x = scaleX < 0 ? -image.width : 0; // move drawing position if flipped
    y = scaleY < 0 ? -image.height : 0;
    ctx.drawImage(image, x, y);
}

---

我试过了，但这些只适用于正数，似乎不适用于规模。我发现了这个问题，但是如果您使用原始代码，但指定drawImage中的宽度和高度作为窗口，请不要重提如何使用这些答案。视频高度和宽度是否有效？是的，但我希望dWidth和dHeight上的值为负值，所以我不能使用这些值。dWidth和dHeight仅对正值有效。

function drawImage(image, x, y, scaleX, scaleY){  // x y define center
    ctx.setTransform(scaleX, 0, 0, scaleY, x, y); // set scale and translation
    ctx.drawImage(image, -image.width / 2, -image.height / 2);
}