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

Question

I am not sure, how i can be more specific, but i am putting my best effort to explain it.I am trying to understand, what should i be looking for to be more specific, so this is all i have got at this moment.我不确定，我如何才能更具体，但我正在尽我最大的努力来解释它。我试图理解，我应该寻找什么才能更具体，所以这就是我此刻所拥有的.

I was exploring HTML5 JavaScript games, and I noticed, that making the canvas height and width 100% distorts the animation within.我正在探索 HTML5 JavaScript 游戏，我注意到，使画布高度和宽度 100% 会扭曲其中的动画。 a simple example that i got from here .我从这里得到的一个简单例子。 If i change the canvas size to 100% (in the example I have provided) it breaks the animation of the game(for example the asteroid).如果我将画布大小更改为 100%（在我提供的示例中），它会破坏游戏的动画（例如小行星）。

I would like to know, which property of HTML5 is responsible for this behaviour and what should I be looking for to get the HTML5 animation fit the complete screen size?我想知道，HTML5 的哪个属性负责这种行为，我应该寻找什么才能使 HTML5 动画适合整个屏幕尺寸？

EDIT编辑
I tried to run cordova to build the game to native platform,but the 1st problem i am encountering is that the canvas was not fitting the screen size.我尝试运行cordova来将游戏构建到本机平台，但我遇到的第一个问题是画布不适合屏幕尺寸。 (that's why i wanted it to completely fit the browser screen, but i see a complete misfit when a canvas made for the browser screen is rendered to the native using cordova). （这就是为什么我希望它完全适合浏览器屏幕，但是当使用cordova 将为浏览器屏幕制作的画布呈现给本机时，我发现完全不适合）。
I explored phaser, about how they are solving this problem, and found this game which is using something called a ScalingManager .我探索了 phaser，了解他们如何解决这个问题，并发现这个游戏使用了一种叫做ScalingManager 的东西。
So, my questions are所以，我的问题是
1. What is scaling a Game? 1. 什么是游戏规模化？
2. How is the scaling-manager of phaser working 2. Phaser 的缩放管理器是如何工作的
3. without using the scaling manager why will a game not fit the moile screen size even though the canvas height and width are properly mentioned? 3. 不使用缩放管理器，为什么即使正确提到画布高度和宽度，游戏仍然不适合moile屏幕尺寸？
4. is there a small experment (without using any phaser or similar javascript game framework) that i can do to understand the need for scaling with simple HTML5 javasctipt and cordova? 4. 是否有一个小实验（不使用任何移相器或类似的 javascript 游戏框架）可以让我了解使用简单的 HTML5 javasctipt 和cordova 进行缩放的需要？

Answer 1

A canvas has two distinct sizes:画布有两种不同的尺寸：

the size of the element on the page页面上元素的大小
the size in pixel of the canvas画布的像素大小

To avoid distortion and get a pixel-perfect graphic you need to ensure they end up equal... for example:为了避免失真并获得像素完美的图形，您需要确保它们最终相等......例如：

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

For single-page HTML games where you just want to draw everything in a canvas a simple approach is:对于您只想在画布中绘制所有内容的单页 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>

You will also need to check for changes in innerWidth / innerHeight if your app has parts in which you're just waiting for user interaction (not looping on calling redraw ) and the user instead resizes the browser window or tilts the phone/tab.如果您的应用程序的某些部分您只是在等待用户交互（而不是在调用redraw循环），并且用户改为调整浏览器窗口大小或倾斜手机/标签，您还需要检查innerWidth / innerHeight变化。

Answer 2

With Phaser 3, I succeeded by adding window.innerWidth and window.innerHeight to the Scale object into my config :使用 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}
  }
}
};

For the moment I don't see any problem, it makes the trick.目前我没有看到任何问题，这就是诀窍。

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-11-06 11:09:36

解决方案2
0 2021-01-19 16:20:17

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-11-06 11:09:36

解决方案2 0 2021-01-19 16:20:17

解决方案1
2 已采纳 2015-11-06 11:09:36

解决方案2
0 2021-01-19 16:20:17