Can Canvas Be Used as a CSS Background?-CSS Tutorial-php.cn

Can Canvas Be Used as a CSS Background?

Linda Hamilton

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

Original

787 people have browsed it

Embedding Canvas into CSS Backgrounds

The question arises: can the canvas element be utilized as a backdrop for CSS styles?

Webkit Compatibility

Since 2008, WebKit has supported this functionality. Utilizing the canvas element as background can be achieved through the following code:

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

Copy after login

Firefox Implementation

Firefox 4 introduced a feature that allows any element (including canvas) to be used as a CSS background:

<p>

Copy after login

For further information on this feature, refer to the Mozilla Hacks website.

The above is the detailed content of Can Canvas Be Used as a CSS Background?. For more information, please follow other related articles on the PHP Chinese website!