Para tener un canvas que ocupe toda la ventana del navegador debemos hacer las siguientes cosas:
- Para que el body del HTML ocupe toda la ventana del navegador, sin dejar ningún borde, añadimos el siguiente atributo a la etiqueta body:
style="margin:0; padding:0; width:100%; height:100%;"
- Para que el canvas no tenga barras de scroll hay que añadir el siguiente atributo al canvas:
style="display:block;"
- Para que el canvas ocupe toda la ventana, cada vez que vayamos a volver a dibujar hay que redimensionarlo, con las siguientes instrucciones:
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
Un ejemplo de uso:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" >
var canvas;
var ctx; //contexto del canvas.
function setup(){
// accedemos al canvas
canvas = document.getElementById('my_canvas');
// si se puede acceder al contexto del canvas
if (canvas.getContext){
// accedemos al contexto del canvas
// y llamamos a nuestra función de dibujo.
ctx = canvas.getContext('2d');
draw();
}
else { // el canvas no está soportado
alert('Este navegador no es compatible con canvas');
}
}
// nuestra función de dibujo
function draw(){
// lo ajustamos al tamaño de la ventana del navegador
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// dibujamos. En este caso, 10000 lineas aleatorias
pintaLineasAleatorias(canvas.width, canvas.height, 10000)
}
function pintaLineasAleatorias(width, height, n)
{
var x1, y1, x2, y2;
for (var i=0; i< n; i++)
{
x1 = Math.floor((Math.random()*(width + 1)));
x2 = Math.floor((Math.random()*(width + 1)));
y1 = Math.floor((Math.random()*(height +1)));
y2 = Math.floor((Math.random()*(height +1)));
ctx.strokeStyle = 'rgb('
+ Math.floor(Math.random()*256)
+ ',' + Math.floor(Math.random()*256)
+ ',' + Math.floor(Math.random()*256)
+ ')';
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.closePath();
ctx.stroke();
}
}
</script>
</head>
<body style="margin:0; padding:0; width:100%; height:100%;" onload="setup()" >
<canvas id="my_canvas" style="display:block;"></canvas>
</body>
</html>
No hay comentarios:
Publicar un comentario