Wie man HTML5-Canvas-Seite in voller Größe mit Cocos2D

Ich bin neu in Cocos2D-HTML5 (und HTML5 selbst) und ich versuche, den canvas-Bereich, um die volle Größe der Seite. Ich bin verwirrt, wie wenige Probleme, die dokumentiert sind, über dieses auf das internet, so hoffe ich, es ist eigentlich wirklich einfach.

Das problem ist, dass die <canvas> element nicht akzeptieren width="100%" oder height="100%", aber nur die Pixel (aber dann wird es nicht zu Strecken, um das Fenster zu passen).

Habe ich auch schon versucht Lösungen wie beschrieben hier (css und javascript), aber es scheint, dass Cocos2D ändert die Größe der Leinwand zu passen, die width und height Eigenschaften dennoch, und wenn ausgelassen, verwendet eine Standard-Größe von 300 x 150 px (ohne Cocos2D bekomme ich ein full-page-Leinwand).

Wie kann ich die Leinwandgröße verändern, passen Sie die Seite in Cocos2D selbst?

InformationsquelleAutor RemiX | 2013-07-06

  1. 13

    Quelle

    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 */
    Vielen Dank für die klare Antwort. Ich habe schon zu sehen, dass Seite, aber irgendwie muss etwas falsch gelaufen. Das klappt perfekt.
    Danke, die css war der lästige Teil.

    InformationsquelleAutor VixinG

  2. 2

    Er set in /main.js. Standard-Größe :

    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);

    Seite in voller Größe:

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

    InformationsquelleAutor spirinvladimir

Schreibe einen Kommentar