HTML Canvas Vollbild

Ich spiele mit der folgenden Anwendung unter Verwendung des HTML-Canvas: http://driz.co.uk/particles/

Im Moment ist es auf 640x480 Pixel eingestellt, aber ich möchte es im Vollbildmodus machen, da es als Projektor angezeigt wird. Soweit ich das beurteilen kann, kann ich die Canvas-Größe jedoch nicht auf 100% als Variablen festlegen, außer auf Zahlen und nicht auf%. Durch die Verwendung von CSS wird es nur gestreckt, anstatt es tatsächlich im Vollbildmodus anzuzeigen.

Irgendwelche Ideen?

EDIT: Versucht, die Höhe und Breite mit jQuery zu finden, aber es bricht die Leinwand irgendwelche Ideen warum?

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


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

Das Javascript hat

var canvasW     = 640;
var canvasH     = 480;

drin. Versuchen Sie, diese sowie das CSS für die Leinwand zu ändern.

Oder noch besser, lassen Sie die Initialisierungsfunktion die Größe der Zeichenfläche aus dem CSS bestimmen!

Ändern Sie als Reaktion auf Ihre Änderungen Ihre Init-Funktion:

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

Entfernen Sie auch alle CSS aus den Wrappern, die nur Junks Zeug auf. Sie müssen die js bearbeiten, um sie vollständig zu entfernen ... Ich konnte sie jedoch im Vollbildmodus anzeigen.

html, body {
    overflow: hidden;
}

Bearbeiten : document.widthund document.height sind veraltet . Ersetzen durch document.body.clientWidthunddocument.body.clientHeight

Sie können einfach Folgendes in Ihre HTML-Hauptseite oder eine Funktion einfügen:

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

Entfernen Sie dann die Ränder auf der Seite

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

Das sollte den Job machen

Das neueste Chrome und Firefox unterstützen eine Vollbild-API, aber die Einstellung auf Vollbild entspricht einer Fenstergrößenänderung. Hören Sie sich das onresize-Event des Fensterobjekts an:

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

Dies funktioniert nicht in jedem Browser. Sie sollten überprüfen, ob die Funktionen vorhanden sind, da sonst ein js-Fehler ausgelöst wird.

Weitere Informationen zu HTML5-Vollbild finden Sie unter: http://updates.html5rocks.com/2011/10/Lass-Ihr-Inhalt-Do-the-Talking-Fullscreen-API

Sie müssen lediglich die Attribute width und height dynamisch auf die Größe der Zeichenfläche einstellen. Wenn Sie also CSS verwenden, um es über das gesamte Browserfenster zu verteilen, haben Sie eine kleine Funktion in Javascript, die die Breite und Höhe misst und sie zuweist. Ich bin mit jQuery nicht besonders vertraut. Betrachten Sie also diesen Pseudocode:

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

Die Attribute width und height des Elements bestimmen, wie viele Pixel es im internen Rendering-Puffer verwendet. Wenn Sie diese in neue Zahlen ändern, wird die Zeichenfläche mit einem unterschiedlich großen, leeren Puffer neu initialisiert. Der Browser streckt die Grafiken nur, wenn die Attribute width und height nicht mit der tatsächlichen Pixelbreite und -höhe der realen Welt übereinstimmen.

Weil es noch nicht gepostet wurde und ein einfacher CSS-Fix ist:

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

Funktioniert hervorragend, wenn Sie einen Vollbild-Canvas-Hintergrund anwenden möchten (z. B. mit Granim.js).

Stellen Sie beim Laden des Dokuments die ein

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

A - So berechnen Sie die Breite und Höhe des Vollbilds

Hier sind die Funktionen;

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

Überprüfen Sie dies heraus

B - So machen Sie den Vollbildmodus mit Größenänderung stabil

Hier ist die Größenänderungsmethode für das Größenänderungsereignis.

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 - So entfernen Sie Bildlaufleisten

Einfach;

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

D - Demo-Code

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

Ich hoffe es wird nützlich sein.

// 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");
    }
}

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/

Es ist ganz einfach: Stellen Sie die Breite und Höhe der Leinwand auf screen.width und screen.height ein. dann drücke F11! denke, F11 sollte in den meisten Browsern in FFox und IE Vollbild machen.

AFAIK, HTML5 bietet keine API, die Vollbild unterstützt.

Diese Frage enthält einige Gesichtspunkte zum Erstellen von HTML5-Videos im Vollbildmodus, z. B. webkitEnterFullscreenim Webkit.
Gibt es eine Möglichkeit, HTML5-Videos im Vollbildmodus zu erstellen?

Sie können einfach Ereignisse zur Größenänderung von Fenstern erfassen und die Größe Ihrer Zeichenfläche als Ansichtsfenster des Browsers festlegen.

Holen Sie sich die volle Breite und Höhe des Bildschirms und erstellen Sie ein neues Fenster, das auf die entsprechende Breite und Höhe eingestellt ist und bei dem alles deaktiviert ist. Erstellen Sie eine Leinwand innerhalb dieses neuen Fensters und stellen Sie die Breite und Höhe der Leinwand auf die Breite - 10 Pixel und die Höhe - 20 Pixel ein (um die Leiste und die Kanten des Fensters zu berücksichtigen). Dann arbeite deine Magie auf dieser Leinwand.

Nun, ich wollte meine Leinwand auch im Vollbildmodus erstellen. So habe ich es gemacht. Ich werde die gesamte index.html veröffentlichen, da ich noch kein CSS-Experte bin: (im Grunde genommen nur mit Position: fest und Breite und Höhe als 100% und oben und links als 0% und ich habe diesen CSS-Code für jedes Tag verschachtelt Außerdem habe ich eine minimale Höhe und eine minimale Breite von 100%. Als ich es mit einem 1-Pixel-Rand versuchte, änderte sich die Randgröße beim Vergrößern und Verkleinern, aber die Leinwand blieb im Vollbildmodus.)

<!DOCTYPE html>
<html style="position:fixed;min-height:100%;min-width:100%;height:100%;width:100%;top:0%;left:0%;resize:none;">
<head>
<title>MOUSEOVER</title>
<script "text/javascript" src="main.js"></script>

</head>


<body id="BODY_CONTAINER" style="position:fixed;min-height:100%;min-width:100%;height:100%;width:100%;top:0%;left:0%;resize:none;">



<div id="DIV_GUI_CONTAINER" style="position:fixed;min-height:100%;min-width:100%;height:100%;width:100%;top:0%;left:0%;resize:none;">

<canvas id="myCanvas"  style="position:fixed;min-height:100%;min-width:100%;height:100%;width:100%;top:0%;left:0%;resize:none;">

</canvas>

</div>


</body>


</html>

BEARBEITEN: Fügen Sie dies dem Canvas-Element hinzu:

<canvas id="myCanvas" width="" height="" style="position:fixed;min-height:100%;min-width:100%;height:100%;width:100%;top:0%;left:0%;resize:none;">

</canvas>

Fügen Sie dies dem Javascript hinzu

canvas.width = window.screen.width;

canvas.height = window.screen.height;

Ich fand, dass dies die Zeichnung viel glatter machte als mein ursprünglicher Kommentar.

Vielen Dank.

Wenn Sie es in einer Präsentation anzeigen möchten, sollten Sie die Methode requestFullscreen () verwenden

let canvas = document.getElementById("canvas_id");
canvas.requestFullscreen();

das sollte es unter allen aktuellen Umständen im Vollbildmodus anzeigen.

Überprüfen Sie auch die Support-Tabelle https://caniuse.com/?search=requestFullscreen