Comment faire de HTML5 Canvas pleine taille de la page avec Cocos2D

Je suis nouveau sur Cocos2D-HTML5 (et HTML5 lui-même) et que j'essaie de faire de la toile à la taille totale de la page. Je suis confus par le peu de questions sont documentés à ce sujet sur l'internet, donc j'espère que c'est en fait très simple.

Le problème est que le <canvas> élément n'accepte pas width="100%" ou height="100%", mais seuls les pixels (mais alors il ne est pas adapté à la taille de la fenêtre).

J'ai aussi tenté les solutions décrites ici (css et javascript), mais il semble que Cocos2D redimensionne la toile pour s'adapter à la width et height propriétés néanmoins, et si il est omis, utilise une taille par défaut de 300 x 150 px (sans Cocos2D j'obtiens une page complète de la toile).

Comment puis-je changer la taille du canevas pour adapter la page de Cocos2D lui-même?

OriginalL'auteur RemiX | 2013-07-06

  1. 13

    source

    HTML:

    <canvas id="canvas"></canvas>

    JavaScript:

    var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

    CSS:

    * { margin:0; padding:0; } /* to remove the top and left whitespace */
html, body { width:100%; height:100%; } /* just to be sure these are full screen*/
canvas { display:block; } /* To remove the scrollbars */
    Merci pour la réponse claire. Je n'ai déjà fait voir que la page, mais de toute façon il y a quelque chose de mal. Cela fonctionne parfaitement.
    Merci, le css a la fâcheuse partie.

    OriginalL'auteur VixinG

  2. 2

    Il de jeu /main.js. La taille par défaut :

    var resourceSize = cc.size(480, 800);
var designSize = cc.size(480, 800);
director.setContentScaleFactor(resourceSize.width / designSize.width);
cc.EGLView.getInstance().setDesignResolutionSize(designSize.width, designSize.height, cc.RESOLUTION_POLICY.SHOW_ALL);

    Pleine taille de la page:

    var screenSize = cc.EGLView.getInstance().getFrameSize();
cc.EGLView.getInstance().setDesignResolutionSize(screenSize.width, screenSize.height, cc.RESOLUTION_POLICY.SHOW_ALL);

    OriginalL'auteur spirinvladimir