Wie behalte ich ein Element, das das Fenster zentriert füllt?

Question

Wie behalte ich die Leinwand in der this demo immer zentriert (auch wenn die Bildlaufleisten angezeigt werden), wenn die Größe des Fensters geändert wird? Das Element canvas sollte immer das Fenster ausfüllen.

Ich habe versucht, mit Einstellungen wie left, margin-left usw. (einschließlich negativer Werte) zu spielen, aber ohne Erfolg.

Answer 1

Haben Sie versucht overflow: hidden;?

JSFiddle

body { 
    overflow: hidden; 
} 

Answer 2

Sie können so etwas wie Leinwand tun { position: fixed; oben: -500px; }

Answer 3

auf die Leinwand mit der Seite machen die Größe, versuchen ein Fenster Zuhörer die Größe und fügte hinzu:

window.addEventListener("resize", function() { 
    canvas.width = window.innerWidth; 
    canvas.width = window.innerHeight; 
}); 

Wenn Sie Ränder zu entfernen, um die Leinwand, um die gesamte Seite füllt, versuchen Sie die folgenden CSS mit denen Sie Ihre Seite:

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

Answer 4

Ist das, was Sie wollten?

Dies ist eine refaktorierte Version Ihres Codes, die die Größe der Leinwand an die kleinste Dimension des Fensters (Breite oder Höhe) bei der Fenstergrößenänderung anpasst. Es setzt auch display des Canvas auf block und verwendet margin: 0 auto, um es zu zentrieren.

Hier ist die demo.

AKTUALISIEREN 1 Ich habe mit Kommentaren umgestaltet, um anzuzeigen, wo der Code geändert werden muss, um die Zeichenfläche auf die größte Dimension zwischen Fensterhöhe und Fensterbreite zu ändern.

UPDATE 2 Ich habe eine Umgestaltung vorgenommen, damit die Fadenkreuze immer zentriert sind, indem die Breite und Höhe auf das genaue Fenster eingestellt werden.

Ich habe auch das CSS aktualisiert, um alle Abstände und Ränder zu entfernen.

Die Leinwand wird unter window.onresize neu gezeichnet.

var canvas = document.createElement('canvas'); 
 
document.body.appendChild(canvas); 
 

 
function setSize() { 
 
    var w = window.innerWidth; 
 
    var h = window.innerHeight; 
 
    //var size = (h > w) ? h : w; //<<<< resize to largest between height and width 
 
    //var size = (h < w) ? h : w; //<<<< resize to smallest between height and width 
 
    //canvas.width = size; 
 
    //canvas.height = size; 
 
    canvas.width = w; \t //<<<< exact resizing to width 
 
    canvas.height = h; \t //<<<< exact resizing to height 
 
} 
 

 
function draw() { 
 
    var context = canvas.getContext('2d'); 
 
    context.fillRect(0, 0, canvas.width, canvas.height); 
 
    context.strokeStyle = 'red'; 
 
    context.moveTo(canvas.width/2, 0); 
 
    context.lineTo(canvas.width/2, canvas.height); 
 
    context.moveTo(0, canvas.height/2); 
 
    context.lineTo(canvas.width, canvas.height/2); 
 
    context.stroke(); 
 
} 
 

 
setSize(); 
 
draw(); 
 

 
window.onresize = function(e) { 
 
    setSize(); 
 
    draw(); 
 
};

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
canvas { 
 
    display: block; 
 
    margin: 0 auto; 
 
}

Answer 5

Nach viel Fummelei, ich glaube, ich es herausgefunden. Hier ist die working demo (fullscreen version). I am Ende mit der folgenden Schleife:

function render() { 
    requestAnimationFrame(render); 
    window.scrollTo(
     document.documentElement.scrollWidth/2 - window.innerWidth/2, 
     document.documentElement.scrollHeight/2 - window.innerHeight/2 
    ); 
} 
requestAnimationFrame(render); 

das automatisch das Fenster in der Mitte des gesamten rollbaren Bereichs Spiralen (einschließlich den nicht sichtbaren Teile) minus der Hälfte der Größe des Betrachtungsbereiches selbst.

Danke an alle für Ihre Hilfe!