Frage

I do not work with intel XDK long. I'm making a game and I want the canvas was stretched across the screen on any phone. I tried this

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

In the emulator, it was fine. But on my Android (Nexus 7 G) was only the page background. Canvas disappeared!

Keine korrekte Lösung

Andere Tipps

Try initializing canvas inside after DeviceReady is fired, the width and height may not be initialized before the intel.xdk.device.ready is fired.

Here is the modified code:

<!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>

With Intel XDK, having the <canvas id="game"></canvas> is optional, you can access the canvas object directly via intel.xdk.canvas.

Moreover, the canvas is always fullscreen, you don't need to stretch it yourself.

So, your problem might be related to something else, and you have to show us a sample of your code so we can help you.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top