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的第一次加載時渲染

回答

相關問題