HTML5 - Canvas无法在Android WebView的第一次加载时渲染

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

}

来源

2017-09-20 lhmcneil

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

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

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

来源

2017-09-20 15:46:05 lhmcneil

HTML5 - Canvas无法在Android WebView的第一次加载时渲染

回答

相关问题