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

Question

我有一个动画/画布绘图，其中像素是硬编码的，而不是相对的。 如何使浏览器的大小和画布/绘图/动画缩放？

我曾想过要根据浏览器或画布的宽度和高度来设置像素值，但是我不知道这是一个好主意。

有小费吗？

PS：我没有发布代码，因为它差不多有1000行，但是如果需要，我可以发布一部分。

Answer 1

缩放以适合，填充或拉伸

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

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

正如前面的答案指出的那样，您可以使用innerWidth，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); 顶部和底部或左侧和右侧都有一些剪裁。

设置变换后，即可正常渲染。 您不必更改代码中的坐标，就代码而言，线宽，字体大小，阴影偏移都保持不变。

Answer 2

将画布的width和height分别设置为window.innerWidth和window.innerHeight 。 因此，代码将类似于（在JS中）：

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

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