Ein html5 canvas Element im Hintergrund meiner Seite?

Ist es möglich, ein Vollbild-Canvas-Element im Hintergrund einer Webseite und "normale" Markup-Elemente wie eine Tabelle davor zu haben?Ein html5 canvas Element im Hintergrund meiner Seite?

wie der folgende Code-Schnipsel (wenn es nicht als alternativer content verwendet werden würde):

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

Quelle

2010-04-27 user306708

Sie könnten einen CSS-Stil auf der Leinwand versuchen Einstellung, wo es ein position: fixed (oder absolute entsprechend) hat, und dann alle Inhalte, die folgt es (im Gegensatz zu Container-Inhalt, wie Sie in Ihrem Beispiel gegeben haben) sollte darüber sitzen.

Quelle

2010-04-27 08:19:55

versucht style = "position: fixed; top: 0; links: 0" und es funktioniert gut. Danke! – user306708

gerade entdeckt, dass die Einstellung Z-Index: -1; wird benötigt, um die Leinwand hinter den anderen Elementen zu platzieren. – user306708

+13

@ fx42: Setze 'z-index: -1' nicht, es hat Probleme mit einigen Browsern. Wickeln Sie stattdessen den Rest Ihrer Elemente in ein Div und setzen Sie 'z-index: 1' auf dieses div. –

Ich habe es für Sie mit dem folgenden Code versucht. Wie Matthew es beschreibt, wird das div auf das Canvas-Element gesetzt. So sollte für Sie arbeiten

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

Quelle

2010-04-27 08:33:47 Rob

Vielen Dank für das Codebeispiel. – 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>

Quelle

2012-05-30 04:18:40

Fursyl brauchen Sie js für Leinwandzeichnung. , aber Sie können ein Canvas-Element als Hintergrund nur mit CSS erreichen. Probieren Sie dieses Skript aus. und kann dir dienen :) –

Ein html5 canvas Element im Hintergrund meiner Seite?

Antwort

Verwandte Themen