Question

我正在开发一个基于HTML5画布的游戏，该游戏在现有应用程序中的WebView中运行。在第一次运行游戏时，它会在后台成功加载，所有日志都表明它已准备就绪并正在运行。但是，WebView中不显示任何内容。如果我将其他东西加载到WebView中然后返回到我的游戏，它会像以前一样成功加载，然后渲染。什么可以阻止画布在首次运行时显示，仅用于后续重新加载？

详细信息：

我第一次加载游戏时没有出现控制台错误。
在iOS版应用程序中运行时，游戏加载成功。
应用于canvas元素的CSS不会呈现，这表明在显示它们之前加载我的资源并不是一个问题。

我调查过的所有问题都是由于在显示资产之前尝试渲染资产造成的，因此后续的重新加载是由现在显示的缓存图像修复的，但我无法找到有关画布失败的任何内容在Android中显示。

这是WebView加载的HTML：

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
  <title>Darts</title>
  <meta name="description" content="Darts GamePad Game">
  <script src="js/dummy-gamepad-functions.js"></script>
  <script src="js/libs/polyfill.js"></script>
  <script src="js/gamepad-client.js"></script>
  <script src="js/darts-boot.js"></script>
  <script src="js/darts-loader.js"></script>
  <link rel="stylesheet" href="css/darts.css">
</head>

<body onload=bootGame()>
  <div id="darts-game-container"></div>
</body>

</html>

这是我的onload脚本：

var bootGame = () => {

  //create canvas element
  let canvas = document.createElement('canvas');
  canvas.id = "darts-canvas";
  canvas.width = 740;
  canvas.height = 400;

  let gameContainer = document.getElementById("darts-game-container");
  gameContainer.appendChild(canvas);

  //scale canvas to view window
  let gamepadViewport = document.getElementById("darts-game-container"),
    gamepadCanvas = document.getElementById("darts-canvas"),
    viewportWidth = window.innerWidth,
    canvasWidth = gamepadCanvas.width,
    viewportHeight = window.innerHeight,
    canvasHeight = gamepadCanvas.height;

  let scaleRatio = Math.min(viewportWidth/canvasWidth, viewportHeight/canvasHeight);
  if (scaleRatio < 1) {
    gamepadViewport.style.transform = `scale(${scaleRatio}, ${scaleRatio})`;
    gamepadViewport.style.webkitTransform = `scale(${scaleRatio}, ${scaleRatio})`;
    gamepadViewport.style.mozTransform = `scale(${scaleRatio}, ${scaleRatio})`;
    gamepadViewport.style.oTransform = `scale(${scaleRatio}, ${scaleRatio})`;
  }

  //initialise Loader
  Darts.Loader = new Loader();

  //initialise GamePad API, then initialise core classes when loaded
  GamePadClient = new GamePadClient();
  GamePadClient.initialise()
    .then(() => {

      //load all scripts
      return Darts.Loader.loadScripts(LIBS_TO_LOAD, COMMON_LIB_PATH, LIB_NAME_SUFFIX)
    })
    .then(() => {
      return Darts.Loader.loadScripts(SCRIPTS_TO_LOAD, COMMON_SCRIPT_PATH, SCRIPT_NAME_SUFFIX)
    })
    .then(() => {
      //initalise core classes
      Darts.Controller = new Controller();
      Darts.Logic = new Logic();
      Darts.Display = new Display();
      Darts.GameProps = new GameProps();
      Darts.GameState = new GameState();

      //loads display elements and scripts, then inits game once complete
      Darts.Controller.initGame();
    });

}

Answer 1

在我将其缩小到我的画布调整大小方法之后，我已经解决了它。 window.innerWidth和window.innerHeight在调用window.onload时没有设置，初始值为0.只有在调用window.onresize事件后才能正确设置它们，所以要监听它然后缩放画布给出了正确的结果。

HTML5 - 在Android WebView中首次加载时无法渲染画布

1 个答案: