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

HTML5 canvas height and width 100% distorts the game animation

本文关键字：100% 游戏动画 高度 HTML5      更新时间：2023-09-26

我不确定如何才能更具体，但我正在尽我最大的努力解释它。我正在努力理解，我应该寻找什么来更具体，所以这就是我目前所拥有的。

我在探索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>

如果你的应用程序中有一些部分你只是在等待用户交互（而不是循环调用redraw），而用户却调整了浏览器窗口的大小或倾斜了手机/选项卡，你还需要检查innerWidth/innerHeight中的更改。

使用Phaser3，我成功地将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}
  }
}
};

目前我看不出有什么问题，这很管用。

相关文章：