我不确定如何做到更具体，但是我正在尽最大的努力来解释它。我试图理解，我要寻找更具体的东西是什么，所以这是我目前所拥有的。
我在研究HTML5 JavaScript游戏时，我注意到，使画布的高度和宽度100％会使其中的动画失真。我从这里得到的一个简单例子。如果我将画布大小更改为100％（在我提供的示例中），则会中断游戏的动画（例如小行星）。
我想知道，HTML5的哪个属性负责此行为，我应该寻找什么以使HTML5动画适合整个屏幕尺寸？
编辑
我尝试运行cordova将游戏构建到本机平台，但是我遇到的第一个问题是画布与屏幕尺寸不符。（这就是为什么我希望它完全适合浏览器屏幕，但是当使用cordova将为浏览器屏幕制作的画布渲染到本机时，我发现完全不匹配）。
我探索了Phaser，了解他们如何解决此问题，并发现了这款游戏使用了ScalingManager。
因此，我的问题是
1.什么是游戏扩展？
2.移相器的缩放管理器如何工作
3.不使用缩放管理器，为什么即使正确提到了画布的高度和宽度，游戏也不适合屏幕的大小？
4.是否可以做一点小实验（不使用任何移相器或类似的javascript游戏框架）来了解使用简单HTML5 javasctipt和cordova进行缩放的需要？
画布具有两种不同的尺寸：
为了避免失真并获得像素完美的图形，您需要确保它们最终相等...例如：
function redraw() {
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
...
}
对于只希望在画布上绘制所有内容的单页HTML游戏，一种简单的方法是：
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
* {
margin: 0;
padding: 0;
border: none;
}
body,html {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<script>
var canvas = document.createElement('canvas');
canvas.style.position = 'absolute';
var body = document.body;
body.insertBefore(canvas, body.firstChild);
var context = canvas.getContext('2d');
var devicePixelRatio = window.devicePixelRatio || 1;
var backingStoreRatio = context.webkitBackingStorePixelRatio
|| context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio
|| context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1;
var ratio = devicePixelRatio / backingStoreRatio;
redraw();
window.addEventListener('resize', redraw, false);
window.addEventListener('orientationchange', redraw, false);
function redraw() {
width = (window.innerWidth > 0 ? window.innerWidth : screen.width);
height = (window.innerHeight > 0 ? window.innerHeight : screen.height);
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
width *= ratio;
height *= ratio;
if (canvas.width === width && canvas.height === height) {
return;
}
canvas.width = width;
canvas.height = height;
}
//draw things
</script>
</body>
</html>
您还需要检查innerWidth/中innerHeight是否有更改，如果您的应用程序仅包含一些部分，它们只是在等待用户交互（而不是在调用时循环播放redraw），而用户需要调整浏览器窗口的大小或倾斜手机/标签。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句