javascript - rotate - title html css

HTML Canvas Pantalla completa

Question

Estoy jugando con la siguiente aplicación usando el lienzo HTML: http://driz.co.uk/particles/

Por el momento está configurado en 640x480 píxeles, pero me gustaría hacerlo en pantalla completa, ya que se mostrará un proyector. Sin embargo, por lo que puedo decir, no puedo establecer que el tamaño del lienzo sea 100% como las variables solo, excepto los números y no el%. Usar CSS simplemente lo estira en lugar de hacerlo a pantalla completa real.

¿Algunas ideas?

EDITAR: Intenté encontrar el alto y el ancho usando jQuery pero rompe el lienzo, ¿por qué alguna idea?

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

A - Cómo calcular el ancho y la altura de la pantalla completa

Aquí están las funciones;

canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

Mira esto

B - Cómo hacer que la pantalla completa sea estable con el tamaño

Aquí está el método de cambio de tamaño para el evento de cambio de tamaño;

function resizeCanvas() {
    canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

    WIDTH = canvas.width;
    HEIGHT = canvas.height;

    clearScreen();
}

C - Cómo deshacerse de las barras de desplazamiento

Simplemente;

<style>
    html, body {
        overflow: hidden;
    }
</style>

D - Código de demostración

<html>
 <head>
  <title>Full Screen Canvas Example</title>
  <style>
   html, body {
    overflow: hidden;
   }
  </style>
 </head>
 <body onresize="resizeCanvas()">
  <canvas id="mainCanvas">
  </canvas>
  <script>
   (function () {
    canvas = document.getElementById(''mainCanvas'');
    ctx = canvas.getContext("2d");
    
    canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    WIDTH = canvas.width;
    HEIGHT = canvas.height;
    
    clearScreen();
   })();
   
   function resizeCanvas() {
    canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    
    WIDTH = canvas.width;
    HEIGHT = canvas.height;
    
    clearScreen();
   }
   
   function clearScreen() {
    var grd = ctx.createLinearGradient(0,0,0,180);
    grd.addColorStop(0,"#6666ff");
    grd.addColorStop(1,"#aaaacc");

    ctx.fillStyle = grd;
    ctx.fillRect(  0, 0, WIDTH, HEIGHT );
   }
  </script>
 </body>
</html>

Answer 2

AFAIK, HTML5 no proporciona una API que admita pantalla completa.

Esta pregunta tiene algunos puntos de vista sobre cómo hacer un video html5 a pantalla completa, por ejemplo, usando webkitEnterFullscreen en webkit.
¿Hay alguna manera de hacer que el video html5 a pantalla completa

Answer 3

El javascript tiene

var canvasW     = 640;
var canvasH     = 480;

en eso. Intenta cambiar esos y el CSS para el lienzo.

O mejor aún, haga que la función de inicialización determine el tamaño del lienzo del css.

en respuesta a sus ediciones, cambie su función 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 );
    }
}

También elimine todo el CSS de las envolturas, que simplemente desempolva cosas. Sin embargo, tienes que editar el js para deshacerse de ellos por completo ... Sin embargo, pude obtenerlo a pantalla completa.

html, body {
    overflow: hidden;
}

Editar : document.width y document.height están obsoletos . Reemplace con document.body.clientWidth y document.body.clientHeight

Answer 4

En la carga del documento establece el

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

Answer 5

Espero que sea útil.

// Get the canvas element
var canvas = document.getElementById(''canvas'');

var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
    (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
    (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
    (document.msFullscreenElement && document.msFullscreenElement !== null);

// Enter fullscreen
function fullscreen(){
    if(canvas.RequestFullScreen){
        canvas.RequestFullScreen();
    }else if(canvas.webkitRequestFullScreen){
        canvas.webkitRequestFullScreen();
    }else if(canvas.mozRequestFullScreen){
        canvas.mozRequestFullScreen();
    }else if(canvas.msRequestFullscreen){
        canvas.msRequestFullscreen();
    }else{
        alert("This browser doesn''t supporter fullscreen");
    }
}

// Exit fullscreen
function exitfullscreen(){
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }else{
        alert("Exit fullscreen doesn''t work");
    }
}

Answer 6

Los últimos Chrome y Firefox son compatibles con una API de pantalla completa, pero configurar en pantalla completa es como cambiar el tamaño de la ventana. Escuche el onresize-Event del window-object:

$(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

Esto no funciona en todos los navegadores. Debería verificar si las funciones existen o lanzará un error js.

para obtener más información sobre html5-fullscreen revisa esto: http://updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API

Answer 7

Obtenga el ancho y el alto completos de la pantalla y cree un nuevo conjunto de ventanas con el ancho y alto apropiados, y con todo desactivado. Cree un lienzo dentro de esa nueva ventana, establezca el ancho y alto del lienzo con el ancho - 10px y la altura - 20px (para permitir la barra y los bordes de la ventana). Luego trabaja tu magia en ese lienzo.

Answer 8

Porque no se publicó aún y es una solución simple de CSS:

#canvas {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

Funciona muy bien si desea aplicar un fondo de lienzo a pantalla completa (por ejemplo, con Granim.js).

Answer 9

Puede insertar lo siguiente en su página html principal, o una función:

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

Eso debería hacer el trabajo

Answer 10

Simplemente podría capturar eventos de cambio de tamaño de ventana y establecer el tamaño de su lienzo para que sea la ventana gráfica del navegador.

Answer 11

Todo lo que necesita hacer es establecer los atributos de ancho y alto para que sean del tamaño del lienzo, dinámicamente. Entonces usas CSS para extenderlo en toda la ventana del navegador, luego tienes una pequeña función en javascript que mide el ancho y el alto, y los asigna. No soy terriblemente familiar con jQuery, así que considere este psuedocode:

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

Los atributos de ancho y alto del elemento determinan cuántos píxeles utiliza en su búfer de renderizado interno. Cambiarlos a números nuevos hace que el lienzo se reinicie con un búfer en blanco de diferentes tamaños. El navegador solo estirará los gráficos si los atributos de ancho y alto no concuerdan con el ancho y el alto real del píxel del mundo real.

Answer 12

es simple, configure el ancho y la altura del lienzo en screen.width y screen.height. luego presiona F11! Creo que F11 debería hacer pantalla completa en la mayoría de los navegadores en FFox e IE.

Answer 13

function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    render();
}
window.addEventListener(''resize'', resize, false); resize();
function render() { // draw to screen here
}

https://jsfiddle.net/jy8k6hfd/2/