Impostazione dell'altezza e della larghezza dell'elemento canvas su window.innerHeight/innerWidth che causa le barre di scorrimento

Questo è estremamente semplice, ma non riesco a capire perché causi le barre di scorrimento. Ecco il codice:Impostazione dell'altezza e della larghezza dell'elemento canvas su window.innerHeight/innerWidth che causa le barre di scorrimento

CSS

body, canvas, html{margin:0;padding:0;border:0 none;} 
canvas{background:Black;}

HTML

<html> 
    <head></head> 
    <body></body> 
</html>

JavaScript

var canvas = document.createElement("canvas"); 
canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 
document.getElementsByTagName("body")[0].appendChild(canvas);

Non dovrebbe questo solo essere la causa della tela di coprire la larghezza e altezza o f la finestra visibile? Ecco un esempio JSFiddle: http://jsfiddle.net/TyJYH/

fonte

2012-07-02 BenR

Gli elementi di contenimento, body e html, possono aggiungere margine o riempimento attorno al canvas. È possibile rendere la posizione del canvas assoluta o fissa, oppure impostare esplicitamente i margini e i paddock su 0. – kennebec

Ho risolto questo stesso problema impostando la proprietà CSS display del tag canvas a "blocco".

canvas { 
    display: block; 
}

fonte

2013-04-04 07:04:24 mudphone

GRAZIE, ho letto tante domande prima di trovare questa risposta. La soluzione più pazza che ho trovato era quella di "posizionare: fissa" un'immagine trasparente nell'angolo in basso a destra della finestra e usarla per ottenere le misurazioni. Questo è stato accettato e ottimizzato! –

D'oh! Ho appena realizzato che quando '

Questo sarà risolvere il problema:

canvas { 
    position:absolute; 
    left:0; 
    right:0; 
    bottom:0; 
    top:0; 
}

fonte

2012-07-02 22:35:32 RhinoWalrus

Grazie per l'input. Questo è più di un "trucco". La mia preoccupazione è più del perché specificare che un elemento sia della stessa altezza/larghezza della finestra visualizzabile causa una barra di scorrimento anche se sto specificando che tutti gli elementi abilitati hanno margine, riempimento e bordi zero. – BenR

http://stackoverflow.com/questions/4288253/html5-canvas-100-width-height-of-viewport. Meno "hacky". :-) – RhinoWalrus

Impostazione dell'altezza e della larghezza dell'elemento canvas su window.innerHeight/innerWidth che causa le barre di scorrimento

risposta

Problemi correlati