HTML5-在Android WebView中首次加载时不呈现画布
我正在开发一个基于HTML5画布的游戏，它在现有应用程序的WebView中运行。第一次运行游戏时，它会在后台成功加载，所有日志都表明它已准备就绪并正在运行。但是，WebView中不显示任何内容。如果我将其他内容加载到WebView中，然后返回到我的游戏，它会像以前一样成功加载，然后渲染。什么可以阻止画布在第一次运行时显示，而只在后续重新加载时显示 详情如下：HTML5-在Android WebView中首次加载时不呈现画布,android,html,canvas,html5-canvas,android-webview,Android,Html,Canvas,Html5 Canvas,Android Webview,我正在开发一个基于HTML5画布的游戏，它在现有应用程序的WebView中运行。第一次运行游戏时，它会在后台成功加载，所有日志都表明它已准备就绪并正在运行。但是，WebView中不显示任何内容。如果我将其他内容加载到WebView中，然后返回到我的游戏，它会像以前一样成功加载，然后渲染。什么可以阻止画布在第一次运行时显示，而只在后续重新加载时显示 详情如下： 第一次加载游戏时，我没有收到任何控制台错误 在应用程序的iOS版本中运行时，游戏将成功加载 应用于canvas元素的CSS没有呈现，这表
- 第一次加载游戏时，我没有收到任何控制台错误
- 在应用程序的iOS版本中运行时，游戏将成功加载
- 应用于canvas元素的CSS没有呈现，这表明在显示资产之前加载资产不是问题
<!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>
飞镖
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();
});
}
var bootGame=（）=>{
//创建画布元素
让canvas=document.createElement（'canvas'）；
canvas.id=“省道画布”；
画布宽度=740；
画布高度=400；
让gameContainer=document.getElementById（“飞镖游戏容器”）；
gameContainer.appendChild（画布）；
//缩放画布以查看窗口
让gamepadViewport=document.getElementById（“飞镖游戏容器”），
gamepadCanvas=document.getElementById（“darts画布”），
viewportWidth=window.innerWidth，
canvasWidth=gamepadCanvas.width，
视口高度=window.innerHeight，
canvasHeight=gamepadCanvas.height；
让scaleRatio=Math.min（viewportWidth/canvasWidth，viewportHeight/canvasHeight）；
如果（比例<1）{
gamepadViewport.style.transform=`scale（${scaleRatio}，${scaleRatio}）`；
gamepadViewport.style.webkittTransform=`scale（${scaleRatio}，${scaleRatio}）`；
gamepadViewport.style.mozTransform=`scale（${scaleRatio}，${scaleRatio}）`；
gamepadViewport.style.oTransform=`scale（${scaleRatio}，${scaleRatio}）`；
}
//初始化加载程序
Darts.Loader=新加载器（）；
//初始化GamePad API，然后在加载时初始化核心类
GamePadClient=新的GamePadClient（）；
GamePadClient.initialise（）
.然后（（）=>{
//加载所有脚本
返回Darts.Loader.loadScripts（LIBS_TO_LOAD，COMMON_LIB_PATH，LIB_NAME_后缀）
})
.然后（（）=>{
返回Darts.Loader.loadScripts（脚本到加载，公共脚本路径，脚本名称后缀）
})
.然后（（）=>{
//初始化核心类
Darts.Controller=新控制器（）；
Darts.Logic=新逻辑（）；
Darts.Display=新显示（）；
Darts.GameProps=新的GameProps（）；
Darts.GameState=新游戏状态（）；
//加载显示元素和脚本，完成后初始化游戏
Darts.Controller.initGame（）；
});
}