響應式畫布Intel XDK

我不使用intel XDK long。我正在製作一款遊戲，並且我希望任何手機上的畫布都能在屏幕上展開。我試過這個響應式畫布Intel XDK

canvas.width = window.innerWidth; 
canvas.height = window.innerHeight;

在模擬器中，它很好。但在我的Android（Nexus 7 G）上只有頁面背景。畫布消失了！

來源

2014-02-24 Energy

你能分享一些可用於重現問題的示例代碼嗎？ – krisrak

http://snipplr.com/view/73740/intel-xdk-responsive-canvas/ – Energy

該鏈接不起作用 – krisrak

嘗試在DeviceReady被觸發後初始化畫布內部，在intel.xdk.device.ready被激發之前，寬度和高度可能未被初始化。

這裏是修改後的代碼：

<!DOCTYPE html><!--HTML5 doctype--> 
<html> 
<head> 
    <title>Your New Application</title> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" /> 
    <style type="text/css"> 
     /* Prevent copy paste for all elements except text fields */ 
     * { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); margin:0; padding:0; } 
     input, textarea { -webkit-user-select:text; } 
     html, body { background-color:red; color:black; width:100%; height:100%;} 
     canvas{background-color: #f00; position: relative; display:block;} 
    </style> 
    <script src='intelxdk.js'></script> 
    <script type="text/javascript"> 
     /* This code is used to run as soon as Intel activates */ 
     var onDeviceReady=function(){ 
      initCanvas(); 
      //hide splash screen 
      intel.xdk.device.hideSplashScreen(); 
     }; 
     document.addEventListener("intel.xdk.device.ready",onDeviceReady,false); 

     function initCanvas(){ 
      var canvas = document.getElementById("game"); 
      var ctx = canvas.getContext("2d"); 
      canvas.width = window.innerWidth; 
      canvas.height = window.innerHeight;   
     } 
    </script> 
</head> 
<body> 
    <canvas id="game"></canvas> 
</body> 
</html>

來源

2014-02-24 20:24:36 krisrak

結果是還是一樣。模擬器沒有錯誤，但是當我在設備上運行它時，只能看到背景和畫布。我會嘗試更多的設備。但是，謝謝！ – Energy

嘗試打印畫布寬度和高度 – krisrak

請指定打印畫布。 – Energy

隨着英特爾XDK，具有<canvas id="game"></canvas>是可選的，可以通過intel.xdk.canvas直接訪問畫布對象。

此外，畫布是總是全屏，你不需要自己伸展它。

因此，您的問題可能與其他問題有關，您必須向我們展示您的代碼示例，以便我們爲您提供幫助。

來源

2014-02-25 16:20:47 Tangocoder

http://snipplr.com/view/73741/canvas/ – Energy

或第一個答案來自krisrak。 – Energy

我看到了這個片段，並沒有錯，因爲我說沒有必要隱式設置畫布大小。你的遊戲究竟是不是全屏？ – Tangocoder

響應式畫布Intel XDK

回答

相關問題