缩放以适合，填充或拉伸

几乎每个设备都有不同的显示宽高比，然后每个设置将仅使用部分或全部可用屏幕来显示窗口。

唯一真正的选择是如何适应可用空间。

正如前面的答案所指出的，你可以通过innerWeight，innerHeight获得可用的大小。

所以我们假设你有宽度和高度。

 var width = innerWidth; // or canvas width
 var height = innerHeight; //

默认分辨率

我假设您的应用具有固定的方面和最佳分辨率。为了简化您的应用，您需要保持最佳分辨率存储在代码中。

var defaultWidth = ?
var defaultHeight = ?

要适应显示，您需要获得在应用开始时设置的比例，并在显示尺寸更改时进行调整。你还需要原点。坐标0,0的点与某些将要移动的解决方案相同。

这些值都与应用程序呈现的当前显示有关。它们将采用原生坐标并使它们符合设备像素。

var displaySetting = {
    scaleX : ?,
    scaleY : ?,
    originX : ?,
    originY : ?,  
}

适合，填充或拉伸

3个最基本的选项。

伸展合身。您可以拉伸渲染以适合显示，但会丢失方面。
缩放以适应。您可以缩放渲染，以便维护方面，并且所有显示都可见。根据设备的想法，您可能在侧面或顶部和底部有空的空间。
缩放以填充。您可以缩放渲染，使其填充设备屏幕，但最终可能会裁剪一些或侧面或顶部和底部的渲染。

function getDisplayTransform(type, displaySetting){
    displaySetting = displaySetting || {};
    // first get scales
    if(type === "stretch"){
        displaySetting.scaleX = width / defaultWidth;
        displaySetting.scaleY = height / defaultHeight;
    } else if (type === "fit") {
        displaySetting.scaleX = Math.min(width / defaultWidth, height / defaultHeight);
        displaySetting.scaleY = displaySetting.scaleX;
    } else {  // type to fill
        displaySetting.scaleX = Math.max(width / defaultWidth, height / defaultHeight);        
        displaySetting.scaleY = displaySetting.scaleX;
    }
    // now that the scale is set get the location of the origin. which is 
    displaySetting.originX = width / 2 - defaultWidth * 0.5 * displaySetting.scaleX;
    displaySetting.originY = height / 2 - defaultHeight * 0.5 * displaySetting.scaleY;
    // Note that for scale to fill the origin may be of the display or canvas
    return displaySetting;
}

所以现在你只需要设置新的坐标系

ctx.setTransform(
     displaySetting.scaleX,0,
     0,displaySetting.scaleY,
     displaySetting.originX,displaySetting.originY
);

所以要适应空间以备用getDisplayTransform("fit",displaySetting);或填充使用getDisplayTransform("fill",displaySetting);，这将有一些剪裁顶部和底部或左边＆amp;右。

设置变换后，您可以正常渲染。您不必更改代码中的坐标，线宽，字体大小，阴影偏移都与代码有关。

Answer 2

将画布width和height分别设置为window.innerWidth和window.innerHeight。所以，代码就像（在JS中）：

var canvas = document.getElementById('my_canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

以上代码只会根据窗口宽度和高度更改画布大小。要设置绘图/动画比例，您需要动态设置其位置/大小（相对于窗口宽度/高度），而不是硬编码。

如何制作画布动画比例（HTML5）

2 个答案:

缩放以适合，填充或拉伸

默认分辨率

适合，填充或拉伸