HTML5 canvas 高度和宽度 100% 扭曲游戏动画

Question

我不确定，我怎样才能更具体，但我正在尽最大努力解释 it.I 我试图理解，我应该寻找什么更具体，所以这是我现在所拥有的一切。

我正在探索 HTML5 JavaScript 游戏，我注意到，将 canvas 高度和宽度设置为 100% 会扭曲其中的动画。 a simple example that i got from here。如果我将 canvas 大小更改为 100%（在我提供的示例中），它会破坏游戏的动画（例如小行星）。

我想知道 HTML5 的属性是造成这种行为的原因，我应该寻找什么才能让 HTML5 动画适合整个屏幕尺寸？

编辑
我尝试运行 cordova 将游戏构建到本地平台，但我遇到的第一个问题是 canvas 不适合屏幕尺寸。（这就是为什么我希望它完全适合浏览器屏幕，但是当使用 cordova 将为浏览器屏幕制作的 canvas 呈现给本机时，我发现完全不适合）。
我探索了 Phaser，了解他们如何解决这个问题，并且 found this game which is using something called a ScalingManager。
所以，我的问题是
1。什么是缩放游戏？
2。 Phaser 的 scaling-manager 是如何工作的
3。在不使用缩放管理器的情况下，即使 canvas 高度和宽度被正确提及，为什么游戏不适合 moile 屏幕尺寸？
4。有没有我可以做的小实验（不使用任何移相器或类似的 javascript 游戏框架）来理解使用简单的 HTML5 javasctipt 和 cordova 进行扩展的必要性？

Answer 1

一个canvas有两个个不同的尺寸：

页面上元素的大小
canvas

为避免失真并获得像素完美的图形，您需要确保它们最终相等...例如：

function redraw() {
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
    ...
}

对于单页 HTML 游戏，您只想在 canvas 中绘制所有内容，一个简单的方法是：

<!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>

如果您的应用有一些您只是在等待用户交互的部分（而不是循环调用 redraw，您还需要检查 innerWidth / innerHeight 中的更改) 而用户改为调整浏览器大小 window 或倾斜 phone/tab.

Answer 2

使用 Phaser 3，我成功地将 window.innerWidth 和 window.innerHeight 添加到我的配置中的 Scale 对象：

config: Phaser.Types.Core.GameConfig = {
type: Phaser.AUTO,
scale: {
  mode: Phaser.Scale.FIT,
  parent: 'phaser-game',
  autoCenter: Phaser.Scale.CENTER_BOTH,
  width: window.innerWidth,
  height: window.innerHeight
},
scene: [MainScene],
parent: 'gameContainer',
physics: {
  default: 'arcade',
  arcade: {
    gravity: {y: 0}
  }
}
};

目前我没有发现任何问题，它成功了。

HTML5 canvas 高度和宽度 100% 扭曲游戏动画

HTML5 canvas height and width 100% distorts the game animation

html

javascript

canvas

phaser-framework