Kann Canvas als CSS-Hintergrund verwendet werden?-CSS-Tutorial-php.cn

Kann Canvas als CSS-Hintergrund verwendet werden?

Linda Hamilton

Freigeben： 2024-12-04 01:06:11

Original

787 Leute haben es durchsucht

Canvas in CSS-Hintergründe einbetten

Es stellt sich die Frage: Kann das Canvas-Element als Hintergrund für CSS-Stile verwendet werden?

Webkit-Kompatibilität

Seit 2008 hat WebKit unterstützt diese Funktionalität. Die Verwendung des Canvas-Elements als Hintergrund kann durch den folgenden Code erreicht werden:

<html>
 <head>
 <style>
 div { background: -webkit-canvas(squares); width:600px; height:600px; border:2px solid black }
 </style>

 <script type="application/x-javascript">
function draw(w, h) {
 var ctx = document.getCSSCanvasContext("2d", "squares", w, h);

 ctx.fillStyle = "rgb(200,0,0)";
 ctx.fillRect (10, 10, 55, 50);

 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
 ctx.fillRect (30, 30, 55, 50);
}
 </script>
 </head>
 <body onload="draw(300, 300)">
   <div></div>
 </body>

</html>

Nach dem Login kopieren

Firefox-Implementierung

Firefox 4 hat eine Funktion eingeführt, die jedes Element (einschließlich Canvas) zulässt. zur Verwendung als CSS-Hintergrund:

<p>

Nach dem Login kopieren

Weitere Informationen zu dieser Funktion finden Sie in den Mozilla Hacks Website.

Das obige ist der detaillierte Inhalt vonKann Canvas als CSS-Hintergrund verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!