Question

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

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

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

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

但是，我正在扩大canvas元素的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);

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

2 个答案:

缩放以适合