无论尺寸如何，如何调整画布的大小以适合相同的内容

Question

我正在使用以下代码创建游戏概念：https://pastebin.com/pMNR1CfH。但是，根据窗口的大小，屏幕上会显示更多或更少的对象。如何调整大小，以使视图保持不变？

我有这些变量来尝试缩放画布，但是我不知道将canvas.scale函数放在哪里。

        var scalewidth = window.innerWidth / 1920;
        var scaleheight = window.innerHeight / 969;

谢谢

Answer 1

我假设您要：

• 保持图形的长宽比不变（圆形不应显示为椭圆形）
• 完全可视化用于制作图形的区域（0,0）-（1920,969）
• 在视口的两个维度之一中有空闲空间时，将图形居中。

这是您可以执行的操作：

let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
window.addEventListener('resize', draw);

function draw() {
    // Get current 
    let viewSizes = [canvas.width = window.innerWidth, canvas.height = window.innerHeight];

    // Reset the canvas
    ctx.setTransform(1, 0, 0, 1, 0, 0); // reset transformation
    ctx.clearRect(0, 0, ...viewSizes); // wipe

    // Determine scale factor
    let worldSizes = [1920, 969];
    let scales = worldSizes.map((worldSize, i) => viewSizes[i] / worldSize);
    let minScale = Math.min(...scales);

    // Determine shift in order to center the content
    let shift = scales.map((scale, i) => (viewSizes[i] - minScale * worldSizes[i]) / 2);
    ctx.setTransform(minScale, 0, 0, minScale, ...shift);

    // Draw the contents using world coordinates (0,0)-(1920,969): This is demo
    ctx.beginPath();
    ctx.arc(960, 485, 484, 0, 2 * Math.PI);
    ctx.fillStyle = "blue";
    ctx.fill(); 
    ctx.stroke(); 
    ctx.beginPath();
    ctx.rect(10, 455, 1900, 60);
    ctx.fillStyle = "red";
    ctx.fill(); 
    ctx.stroke(); 
}

draw();

body { margin: 0; overflow: hidden }

<canvas></canvas>