Bolehkah Kanvas Digunakan sebagai Latar Belakang CSS?-tutorial css-php.cn

Bolehkah Kanvas Digunakan sebagai Latar Belakang CSS?

Linda Hamilton

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

asal

787 orang telah melayarinya

Membenamkan Kanvas ke dalam Latar Belakang CSS

Timbul persoalan: bolehkah elemen kanvas digunakan sebagai tirai latar untuk gaya CSS?

Keserasian Webkit

Sejak 2008, WebKit telah menyokong fungsi ini. Menggunakan elemen kanvas sebagai latar belakang boleh dicapai melalui kod berikut:

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

Salin selepas log masuk

Pelaksanaan Firefox

Firefox 4 memperkenalkan ciri yang membenarkan mana-mana elemen (termasuk kanvas) untuk digunakan sebagai latar belakang CSS:

<p>

Salin selepas log masuk

Untuk maklumat lanjut tentang ciri ini, rujuk ke tapak web Mozilla Hacks.

Atas ialah kandungan terperinci Bolehkah Kanvas Digunakan sebagai Latar Belakang CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!