Canvas con altezza e larghezza al 100%
L'elemento <canvas> di HTML5 è un elemento un pò particolare perchè nasce con lo scopo di crearci animazioni dentro.
In generale, quindi, deve avere un'altezza e una larghezza precise.
In alcuni casi potrebbe essere necessario fare in modo che sia automaticamente all 100% rispetto all'elemento in cui si trova.
Abbiamo due possibilità.
La prima è questa:
window.onload = function() {
var canvas = document.getElementById('my_canvas'), context = canvas.getContext('2d');
window.addEventListener('resize', resizeMyCanvas, false);function resizeMyCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
redrawMyCanvas();
}resizeCanvas();
function redrawMyCanvas() {
// DO STUFF
}}
A questo script in Javascript aggiungete queste regole CSS:
* { margin:0; padding:0; }
html, body { width:100%; height:100%; }
canvas { display:block; }
Dentro la funzione redrawMyCanvas dovete metterci il codice che vi serve; per il CSS invece non molto da dire.
La seconda soluzione è leggermente diversa e prevede una soluzione all-in-one:
<!DOCTYPE html>
<html style="width:100%;height:100%;">
<body style="width:100%;height:100%;margin:0;padding:0">
<canvas id="my_canvas" style="width:100%;height:100%;background-color:yellow;display:block">Canvas non supportato.</canvas>
<script type="text/javascript">
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0,0,100,100);
ctx.strokeText("w:" + canvas.width + " h:" + canvas.height, 0, 8);
</script>
</body>
</html>
Quale dei due sia meglio non saprei; io preferisco la prima perchè più ordinata.
html html5 canvas javascript css addeventlist
Commentami!