<p>
<p>
Intégrer Canvas comme arrière-plan CSS
<p>Les Canvas, autrefois limités à des entités autonomes, offrent désormais la possibilité intrigante de fonctionner comme arrière-plans CSS. Cette fonctionnalité, introduite dans WebKit en 2008, utilise la fonction -webkit-canvas() pour transformer les éléments du canevas en arrière-plans.
<html>
<head>
<style>
div { background: -webkit-canvas(squares); width:600px; height:600px; border:2px solid black }
</style>
<script>
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>
Copier après la connexion
<p>Firefox 4 a encore révolutionné ce concept en permettant l'utilisation de n'importe quel élément HTML, y compris canevas, comme arrière-plan CSS. Utilisez simplement la fonction -moz-element() pour obtenir cet effet :
<p>
Copier après la connexion
<p>Explorez Mozilla Hacks pour des détails techniques approfondis sur cette technique innovante de conception d'arrière-plan.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!