将画布宽度和高度缩放到尽可能大但保持纵横比（JS）

Question

如果我有一个特定宽度和高度的画布元素，例如

<canvas id="display" width="900" height="650" tabindex=0></canvas>

并且我想将画布的宽度和高度放大到尽可能大，同时包含在视口中而不更改纵横比或增加要在其中显示的对象的整体区域画布。

这意味着如果一个窗口的宽度为2200，高度为1300，则画布的显示宽度和高度都将加倍（并且不会更大，否则无法包含高度）并且画布将具有新维度 1800 和 1300。

但是，我放大了画布元素的 CSS 显示高度，而不是画布本身，这意味着 画布内的对象也应该增加它们的尺寸。

canvas {
  width: ...
  height: ...
}

如果在调整窗口大小时画布可以自行调整大小会更好，也许使用事件监听器。

有没有办法在 JS 中做到这一点？

Answer 1

缩放以适应

您必须定义方面。这可以通过定义一个默认大小来完成。

const defWidth = 1920;
const defHeight = 1080;

然后你可以监听窗口调整大小事件并调整画布大小以适应。

function resizeEventHandler(){
    // get the max size that fits both width and height by finding the min scale
    var canvasScale = Math.min(innerWidth / defWidth, innerHeight / defHeight);
    // or for max size that fills
    // canvasScale = Math.max(innerWidth / defWidth, innerHeight / defHeight);

    // now set canvas size and resolution to the new scale
    canvas.style.width = (canvas.width = Math.floor(defWidth * canvasScale)) + "px";
    canvas.style.height = (canvas.height = Math.floor(defHeight * canvasScale)) + "px";
}

因为画布分辨率必须是整数，所以纵横比可能超出一个像素。但对此无能为力。

Answer 2

最终找到了我自己的解决方案，如果有更优雅的解决方案，请告诉我。

// get maximum possible size for canvas while maintining aspect ratio
function resizeEventHandler(){
  var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  if(w/canvas.width > h/canvas.height){
    canvas.style.width = "calc("+canvas.width+" / "+canvas.height+" * 100vh)";
    canvas.style.height = "calc(100vh)";
  } else {
    canvas.style.width = "calc(100vw)";
    canvas.style.height = "calc("+canvas.height+" / "+canvas.width+" * 100vw)";
  }
}
resizeEventHandler();
window.addEventListener("resize", resizeEventHandler);