HTML Canvas plein écran

Question

Je joue avec l'application suivante en utilisant le HTML Canvas : http://driz.co.uk/particles/

Pour l'instant, elle est réglée sur 640x480 pixels, mais j'aimerais qu'elle soit en plein écran car elle sera projetée sur un projecteur. Cependant, pour autant que je sache, je ne peux pas définir la taille de la toile à 100 % car les variables ne prennent en compte que les nombres et non les %. L'utilisation de CSS ne fait que l'étirer au lieu de la rendre en plein écran.

Des idées ?

EDIT : J'ai essayé de trouver la hauteur et la largeur en utilisant jQuery mais cela casse le canevas ; une idée de pourquoi ?

var $j = jQuery.noConflict();

var canvas;
var ctx;
var canvasDiv;
var outerDiv;

var canvasW = $j('body').width();
var canvasH = $j('body').height();

//var canvasW     = 640;
//var canvasH     = 480;

var numMovers   = 550;
var movers      = [];
var friction    = .96;
var radCirc     = Math.PI * 2;

var mouseX, mouseY, mouseVX, mouseVY, prevMouseX = 0, prevMouseY = 0;   
var isMouseDown = true;

function init()
{
    canvas = document.getElementById("mainCanvas");

    if( canvas.getContext )
    {
        setup();
        setInterval( run , 33 );
    }
}

function setup()
{
    outerDiv = document.getElementById("outer");
    canvasDiv = document.getElementById("canvasContainer");
    ctx = canvas.getContext("2d");

    var i = numMovers;
    while( i-- )
    {
        var m = new Mover();
        m.x  = canvasW * .5;
        m.y  = canvasH * .5;
        m.vX = Math.cos(i) * Math.random() * 25;
        m.vY = Math.sin(i) * Math.random() * 25;
        m.size = 2;
        movers[i] = m;
    }

    document.onmousedown = onDocMouseDown;
    document.onmouseup   = onDocMouseUp;
    document.onmousemove = onDocMouseMove;
}

function run()
{
    ctx.globalCompositeOperation = "source-over";
    ctx.fillStyle = "rgba(8,8,12,.65)";
    ctx.fillRect( 0 , 0 , canvasW , canvasH );
    ctx.globalCompositeOperation = "lighter";

    mouseVX    = mouseX - prevMouseX;
    mouseVY    = mouseY - prevMouseY;
    prevMouseX = mouseX;
    prevMouseY = mouseY;

    var toDist   = canvasW / 1.15;
    var stirDist = canvasW / 8;
    var blowDist = canvasW / 2;

    var Mrnd   = Math.random;
    var Mabs   = Math.abs;
    var Msqrt  = Math.sqrt;
    var Mcos   = Math.cos;
    var Msin   = Math.sin;
    var Matan2 = Math.atan2;
    var Mmax   = Math.max;
    var Mmin   = Math.min;

    var i = numMovers;
    while( i-- )
    {
        var m  = movers[i];
        var x  = m.x;
        var y  = m.y;
        var vX = m.vX;
        var vY = m.vY;

        var dX = x - mouseX;
        var dY = y - mouseY; 
        var d = Msqrt( dX * dX + dY * dY );
        var a = Matan2( dY , dX );
        var cosA = Mcos( a );
        var sinA = Msin( a );

        if( isMouseDown )
        {
            if( d < blowDist )
            {
                var blowAcc = ( 1 - ( d / blowDist ) ) * 2;
                vX += cosA * blowAcc + .5 - Mrnd();
                vY += sinA * blowAcc + .5 - Mrnd();
            }
        }

        if( d < toDist )
        {
            var toAcc = ( 1 - ( d / toDist ) ) * canvasW * .0014;
            vX -= cosA * toAcc;
            vY -= sinA * toAcc;
        }

        if( d < stirDist )
        {
            var mAcc = ( 1 - ( d / stirDist ) ) * canvasW * .00022;
            vX += mouseVX * mAcc;
            vY += mouseVY * mAcc;           
        }

        vX *= friction;
        vY *= friction;

        var avgVX = Mabs( vX );
        var avgVY = Mabs( vY );
        var avgV = ( avgVX + avgVY ) * .5;

        if( avgVX < .1 ) vX *= Mrnd() * 3;
        if( avgVY < .1 ) vY *= Mrnd() * 3;

        var sc = avgV * .45;
        sc = Mmax( Mmin( sc , 3.5 ) , .4 );

        var nextX = x + vX;
        var nextY = y + vY;

        if( nextX > canvasW )
        {
            nextX = canvasW;
            vX *= -1;
        }
        else if( nextX < 0 )
        {
            nextX = 0;
            vX *= -1;
        }

        if( nextY > canvasH )
        {
            nextY = canvasH;
            vY *= -1;
        }
        else if( nextY < 0 )
        {
            nextY = 0;
            vY *= -1;
        }

        m.vX = vX;
        m.vY = vY;
        m.x  = nextX;
        m.y  = nextY;

        ctx.fillStyle = m.color;
        ctx.beginPath();
        ctx.arc( nextX , nextY , sc , 0 , radCirc , true );
        ctx.closePath();
        ctx.fill();     
    }

    //rect( ctx , mouseX - 3 , mouseY - 3 , 6 , 6 );
}

function onDocMouseMove( e )
{
    var ev = e ? e : window.event;
    mouseX = ev.clientX - outerDiv.offsetLeft - canvasDiv.offsetLeft;
    mouseY = ev.clientY - outerDiv.offsetTop  - canvasDiv.offsetTop;
}

function onDocMouseDown( e )
{
    isMouseDown = true;
    return false;
}

function onDocMouseUp( e )
{
    isMouseDown = true;
    return false;
}

// ==========================================================================================

function Mover()
{
    this.color = "rgb(" + Math.floor( Math.random()*255 ) + "," + Math.floor( Math.random()*255 ) + "," + Math.floor( Math.random()*255 ) + ")";
    this.y     = 0;
    this.x     = 0;
    this.vX    = 0;
    this.vY    = 0;
    this.size  = 0; 
}

// ==========================================================================================

function rect( context , x , y , w , h ) 
{
    context.beginPath();
    context.rect( x , y , w , h );
    context.closePath();
    context.fill();
}

// ==========================================================================================

Answer 1

Le javascript a

var canvasW     = 640;
var canvasH     = 480;

en elle. Essayez de les modifier, ainsi que le css de la toile.

Ou mieux encore, faites en sorte que la fonction d'initialisation détermine la taille du canevas à partir du css !

en réponse à vos modifications, changez votre fonction init :

function init()
{
    canvas = document.getElementById("mainCanvas");
    canvas.width = document.body.clientWidth; //document.width is obsolete
    canvas.height = document.body.clientHeight; //document.height is obsolete
    canvasW = canvas.width;
    canvasH = canvas.height;

    if( canvas.getContext )
    {
        setup();
        setInterval( run , 33 );
    }
}

Supprimez également tous les css des wrappers, qui ne font qu'embrouiller les choses. Vous devez éditer les js pour vous en débarrasser complètement... J'ai réussi à l'obtenir en plein écran.

html, body {
    overflow: hidden;
}

Modifier : document.width et document.height sont obsolètes . Remplacer par document.body.clientWidth et document.body.clientHeight

Answer 2

Vous pouvez simplement insérer le texte suivant dans votre page html principale, ou dans une fonction :

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

Ensuite, pour supprimer les marges de la page

html, body {
    margin: 0 !important;
    padding: 0 !important;
}

Cela devrait faire l'affaire

Answer 3

Les versions les plus récentes de Chrome et de Firefox prennent en charge l'API plein écran, mais le passage au plein écran s'apparente à un redimensionnement de la fenêtre. Écoutez l'événement onresize-Event de l'objet fenêtre :

$(window).bind("resize", function(){
    var w = $(window).width();
    var h = $(window).height();

    $("#mycanvas").css("width", w + "px");
    $("#mycanvas").css("height", h + "px"); 
});

//using HTML5 for fullscreen (only newest Chrome + FF)
$("#mycanvas")[0].webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); //Chrome
$("#mycanvas")[0].mozRequestFullScreen(); //Firefox

//...

//now i want to cancel fullscreen
document.webkitCancelFullScreen(); //Chrome
document.mozCancelFullScreen(); //Firefox

Cela ne fonctionne pas dans tous les navigateurs. Vous devez vérifier si les fonctions existent, sinon vous obtiendrez une erreur de type js.

Pour plus d'informations sur html5-fullscreen, consultez ce lien : http://updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API

Answer 4

Tout ce que vous devez faire, c'est définir les attributs de largeur et de hauteur pour qu'ils correspondent à la taille de la toile, de manière dynamique. Vous utilisez donc le CSS pour qu'il s'étende sur toute la fenêtre du navigateur, puis vous avez une petite fonction en javascript qui mesure la largeur et la hauteur, et les attribue. Je ne suis pas très familier avec jQuery, alors considérez ceci comme du pseudo-code :

window.onload = window.onresize = function() {
  theCanvas.width = theCanvas.offsetWidth;
  theCanvas.height = theCanvas.offsetHeight;
}

Les attributs de largeur et de hauteur de l'élément déterminent le nombre de pixels qu'il utilise dans son tampon de rendu interne. La modification de ces valeurs entraîne la réinitialisation du canevas avec un tampon vide de taille différente. Le navigateur n'étire les graphiques que si les attributs de largeur et de hauteur ne correspondent pas à la largeur et à la hauteur réelles des pixels du monde réel.

Answer 5

Lors du chargement du document, réglez le

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