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();
}
// ==========================================================================================
javascript
html
canvas
Cameron
quelle
quelle
Antworten:
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.width
unddocument.height
sind veraltet . Ersetzen durchdocument.body.clientWidth
unddocument.body.clientHeight
quelle
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
quelle
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
quelle
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.
quelle
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).
quelle
Stellen Sie beim Laden des Dokuments die ein
canvas.width = window.innerWidth; canvas.height = window.innerHeight;
quelle
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>
quelle
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"); } }
quelle
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/
quelle
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.
quelle
AFAIK, HTML5 bietet keine API, die Vollbild unterstützt.
Diese Frage enthält einige Gesichtspunkte zum Erstellen von HTML5-Videos im Vollbildmodus, z. B.
webkitEnterFullscreen
im Webkit.Gibt es eine Möglichkeit, HTML5-Videos im Vollbildmodus zu erstellen?
quelle
Sie können einfach Ereignisse zur Größenänderung von Fenstern erfassen und die Größe Ihrer Zeichenfläche als Ansichtsfenster des Browsers festlegen.
quelle
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.
quelle
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.
quelle
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
quelle