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

对于细节：

我得到的游戏加载完成首次没有控制台错误。

在iOS版本的应用程序中运行时，游戏加载成功。

应用于canvas元素的CSS不会呈现，这表明在显示它们之前加载我的资源不是问题。

我调查研究，试图使资产显示前，因此后续重新加载被这些现在高速缓存图像固定引起了正在显示的所有问题，但我不能找到有关帆布未能什么在Android中完全显示。

这里是由的WebView加载HTML：

Darts

，这是我的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();

});

}

2017-09-20

lhmcneil

+0

你能分享创建和处理webview的相关代码吗？ –

+0

@amacf我已经添加了相关的代码示例 –