Un elemento canvas html5 sullo sfondo della mia pagina?

È possibile avere un elemento canvas a schermo intero sullo sfondo di una pagina Web e elementi di markup "normali" come un tavolo di fronte ad esso?Un elemento canvas html5 sullo sfondo della mia pagina?

come il seguente frammento di codice (se non sarebbe stato usato come contenuti alternativi):

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

fonte

2010-04-27 user306708

Si potrebbe provare a impostare uno stile CSS sulla tela in cui si ha un position: fixed (o absolute a seconda dei casi), e poi qualsiasi contenuto che segua (al contrario del contenuto del contenitore che hai indicato nell'esempio) dovrebbe sedervisi sopra.

fonte

2010-04-27 08:19:55

stile provato = "position: fixed; top: 0; a sinistra: 0" e funziona bene. Grazie! – user306708

appena scoperto che l'impostazione di z-index: -1; è necessario per mettere la tela dietro gli altri elementi. – user306708

+13

@ fx42: non impostare 'z-index: -1', che ha problemi con alcuni browser. Piuttosto, avvolgi il resto dei tuoi elementi in un div e imposta 'z-index: 1' su quel div. –

L'ho provato con il seguente codice. Il div viene posizionato sopra l'elemento canvas come lo descrive Matthew. Così dovrebbe funzionare per voi

<!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>

fonte

2010-04-27 08:33:47 Rob

Grazie per il codice di esempio. – 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>

fonte

2012-05-30 04:18:40

Per prima cosa è necessario js per il disegno su tela. ma puoi ottenere un elemento canvas come sfondo usando semplicemente i CSS. prova questo script e può servire il bisogno di :) –

Un elemento canvas html5 sullo sfondo della mia pagina?

risposta

Problemi correlati