gpt4 book ai didi

javascript - 如何制作 Canvas 动画比例(HTML5)

转载 作者:太空宇宙 更新时间:2023-11-04 09:08:52 26 4
gpt4 key购买 nike

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

我考虑过使像素值相对于浏览器或 Canvas 的宽度和高度,但我不知道这是否是个好主意。

有什么建议吗?

P.S:我没有发布代码,因为它有近 1000 行长,但如果需要,我可以发布其中的一部分。

最佳答案

缩放以适应、填充或拉伸(stretch)

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

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

正如前面的答案所指出的,您可以使用 innerWidth、innerHeight 获得可用尺寸。

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

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

默认分辨率

我假设您的应用具有固定的纵横比和最佳分辨率。为了让应用的调整变得简单,您需要将最佳分辨率存储在代码中。

var defaultWidth = ?
var defaultHeight = ?

要适应显示,您需要获得在应用程序开始时设置的比例,并在显示尺寸改变时进行调整。您还需要来源。对于将移动的某些解决方案,坐标 0,0 所在的点。

这些值都是相对于应用程序正在呈现的当前显示器而言的。他们将采用本地坐标并使它们符合设备像素。

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

适合、填充或拉伸(stretch)

3 个最基本的选项。

  • 拉伸(stretch)以适应。您拉伸(stretch)渲染以适合显示,但丢失了纵横比。
  • 缩放以适应。您缩放渲染以保持纵横比并且所有显示都可见。根据设备的不同,您可能在侧面或顶部和底部有空白空间。
  • 缩放以填充。您缩放渲染以使其填满设备屏幕,但您最终可能会在侧面或顶部和底部剪裁部分或渲染。

.

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); 这将有顶部和底部或左侧和右侧的一些剪裁。

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

关于javascript - 如何制作 Canvas 动画比例(HTML5),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42274190/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com