¿Un elemento de lienzo html5 en el fondo de mi página?

¿Es posible tener un elemento de lienzo de pantalla completa en el fondo de una página web y elementos de marcado "normales" como una tabla en frente de él?¿Un elemento de lienzo html5 en el fondo de mi página?

como el siguiente fragmento (si no se utiliza como contenido alternativo):

<canvas id="imageView" width="100%" height="100%"> 
    <table>...</table> 
</canvas>

Fuente

2010-04-27 user306708

podría intentar configurar un estilo CSS en el lienzo donde tiene una position: fixed (o absolute según el caso), y luego cualquier contenido que siga a (en contraposición al contenido del contenedor como el que ha dado en su ejemplo) debe sentarse sobre él.

Fuente

2010-04-27 08:19:55

estilo intentado = "position: fixed; superior: 0; left: 0" y funciona muy bien. gracias! – user306708

acaba de descubrir que configuración z-index: -1; es necesario para poner el lienzo detrás de los otros elementos. – user306708

+13

@ fx42: No configure 'z-index: -1', se mezcla con algunos navegadores. Más bien, envuelva el resto de sus elementos en un div y configure 'z-index: 1' en ese div. –

Lo intenté con el siguiente código. El div se coloca en la parte superior del elemento del lienzo tal como Mateo lo describe. Así debería funcionar para usted

<!DOCTYPE HTML> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Canvas demo</title> 
<style type="text/css"> 
    #canvasSection{ position:fixed;} 
</style> 
<script type="text/javascript"> 
function draw() 
{ 

//paint the text 
var canvas = document.getElementById('canvasSection'); 
var context = canvas.getContext('2d'); 

context.fillStyle = '#00f'; 
context.font   = 'italic 30px sans-serif'; 
context.textBaseline = 'top'; 
context.font   = 'bold 30px sans-serif'; 
context.strokeText('Your Text!!', 0, 0); 

//paint the square 

var canvasSquare = document.getElementById('canvasSquare'); 
var ctxSquare = canvas.getContext('2d'); 

ctxSquare.fillStyle='#FF0000'; 
ctxSquare.fillRect(0, 100,50,100); 
} 
</script> 
</head> 
<body onLoad="draw()"> 
<canvas id="canvasSection">Error, canvas is not supported</canvas> 
<div>TestText</div> 
</body> 
</html>

Fuente

2010-04-27 08:33:47 Rob

Gracias por el ejemplo de código. – mihsathe

<html> 

    <style> 
    body{ 
     margin:0; 
     padding:0; 
    } 
    canvas{ 
     position:absolute; 
     left:0; 
     top:0; 
     z-index:-1; 
    } 
    div{ 
     position:absolute; 
     z-index:0; 
     left:12px; 
     top:10px; 
    } 
    </style> 
    <body> 

    <canvas id="myCanvas" width="600" height="600" style="border:1px solid #c3c3c3;"> 
     Your browser does not support the canvas element. 
    </canvas> 
    <div>hello is floating div</div> 

    <script type="text/javascript"> 
     var c=document.getElementById("myCanvas"); 
     var ctx=c.getContext("2d"); 
     var grd=ctx.createLinearGradient(0,0,600,600); 
     grd.addColorStop(0,"#FF0000"); 
     grd.addColorStop(1,"#00FF00"); 
     ctx.fillStyle=grd; 
     ctx.fillRect(0,0,600,600); 
    </script> 

    </body> 
</html>

Fuente

2012-05-30 04:18:40

Firstyl u necesita js para el dibujo del lienzo. pero puede obtener un elemento de lienzo como fondo solo con CSS. prueba esta secuencia de comandos y puede servir a tu necesidad :) –

¿Un elemento de lienzo html5 en el fondo de mi página?

Respuesta

Cuestiones relacionadas