HTML5 畫布高度和寬度 100% 扭曲游戲動畫

Question

我不確定，我如何才能更具體，但我正在盡我最大的努力來解釋它。我試圖理解，我應該尋找什么才能更具體，所以這就是我此刻所擁有的.

我正在探索 HTML5 JavaScript 游戲，我注意到，使畫布高度和寬度 100% 會扭曲其中的動畫。 我從這里得到的一個簡單例子。 如果我將畫布大小更改為 100%（在我提供的示例中），它會破壞游戲的動畫（例如小行星）。

我想知道，HTML5 的哪個屬性負責這種行為，我應該尋找什么才能使 HTML5 動畫適合整個屏幕尺寸？

編輯
我嘗試運行cordova來將游戲構建到本機平台，但我遇到的第一個問題是畫布不適合屏幕尺寸。 （這就是為什么我希望它完全適合瀏覽器屏幕，但是當使用cordova 將為瀏覽器屏幕制作的畫布呈現給本機時，我發現完全不適合）。
我探索了 phaser，了解他們如何解決這個問題，並發現這個游戲使用了一種叫做ScalingManager 的東西。
所以，我的問題是
1. 什么是游戲規模化？
2. Phaser 的縮放管理器是如何工作的
3. 不使用縮放管理器，為什么即使正確提到畫布高度和寬度，游戲仍然不適合moile屏幕尺寸？
4. 是否有一個小實驗（不使用任何移相器或類似的 javascript 游戲框架）可以讓我了解使用簡單的 HTML5 javasctipt 和cordova 進行縮放的需要？

Answer 1

畫布有兩種不同的尺寸：

頁面上元素的大小
畫布的像素大小

為了避免失真並獲得像素完美的圖形，您需要確保它們最終相等......例如：

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變化。

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 畫布高度和寬度 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