使用 Javascript 縮放 canvas 並保持中心？

Question

我想縮放 canvas 並在其上繪制。 我可以縮放 canvas，但它上面的繪圖分別移動到左上角和右下角。 我希望縮放圖像時位於屏幕中間？ （ div 的中間）。

同樣的問題，但對於 JAVA ->

縮放canvas並保持中心

我需要 jvascritp 解決方案。

檢查我的代碼：

const canvas = document.createElement("canvas");
 canvas.width = croppedImage.naturalWidth;
 canvas.height = croppedImage.naturalHeight;
const ctx = canvas.getContext("2d");  
ctx.scale(scale, scale); 
ctx.drawImage(
  croppedImage,
  0,
  0,
  croppedImage.naturalWidth,
  croppedImage.naturalHeight
);

croppedImage 是圖像，這是工作。 scale 是動態變量，但我的縮放圖像始終位於屏幕左側的中心。 我需要的？

ctx.drawImage(
  croppedImage,
  0, // NEED TO CENTER IN MIDDLE 
  0, // NEED TO CENTER IN MIDDLE 
  croppedImage.naturalWidth,
  croppedImage.naturalHeight
);

如何計算它？

Answer 1

您必須考慮按比例縮小 canvas。

使用@code 編寫的內容並添加比例，我們可以將其更改為：

(canvas.width/scale - croppedImage.naturalWidth)/2,
(canvas.height/scale - croppedImage.naturalHeight)/2

我無法讓它在 SO 代碼片段中運行，所以這里有一個指向 codepen 的鏈接，它工作得很好。