Puis-je utiliser l’élément canvas comme un fond de css ?
Réponses
Trop de publicités?
Cela est possible dans WebKit depuis 2008, voir http://webkit.org/blog/176/css-canvas-drawing/
<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>
Actuellement, Firefox 4 contient une fonctionnalité qui vous permet d’utiliser n'importe quel élément (y compris le canevas) comme arrière-plan CSS, de la manière suivante:
<p id="myBackground1" style="background: darkorange; color: white; width: 300px; height: 40px;">
This element will be used as a background.
</p>
<p style="background: -moz-element(#myBackground1); padding: 20px 10px; font-weight: bold;">
This box uses #myBackground1 as its background!
</p>
Voir http://hacks.mozilla.org/2010/08/mozelement/ pour plus de détails.
frenchie
Points
10351
Oui!!!! Vous pouvez mettre une toile en arrière-plan CSS.
var Canvas = document.createElement("canvas");
... do your canvas drawing....
$('body').css({'background-image':"url(" + Canvas.toDataURL("image/png")+ ")" });
Je sais que la question est assez ancienne, mais j’avais l’impression d’afficher ma réponse aux personnes qui visitaient cette page, car c’est la bonne réponse, en une seule ligne de code, à l’aide de la fonction .toDataURL . Cela fonctionne dans tous les navigateurs supportant canvas.
Putuko
Points
372
J'ai été triying pour atteindre cette même fonction dernières semaines, la meilleure solution que j'ai trouvé son le même, proposé par bcat:
- Le rendu de la toile (visible ou cachée)
- Obtenez toile de l'image avec "la toile.toDataURL"
- Assigner cette image-données comme image d'arrière-plan de l'élément (j'utilise MooTools)
La mauvaise nouvelle, pour les images statiques fonctionne très bien, mais avec une animation en Chrome parfois "clignote", et dans Firefox clignote-a-lot. Peut-être que quelqu'un connaît une solution pour se débarrasser de ce "méchant"clignotante.
En ce qui concerne meilleur.
P:.
<!DOCTYPE html>
<html>
<head>
<title>Asign canvas to element background</title>
<script type="text/javascript" src="/js/mootools.1.2.4.js"></script>
<style type="text/css">
* {
outline:0;
padding:0;
margin:0;
border:0;
}
body {
color:#fff;
background:#242424;
}
</style>
<script>
window.addEvent('domready',function() {
//GET BODY
var mibodi = $('mibodi');
var viewportSize = mibodi.getSize();
//GET CANVAS
var micanvas = $('micanvas');
var ctx = micanvas.getContext('2d');
var playAnimation = true;
//GET DIV
var midiv = $('midiv');
//VARIABLES
var rotate_angle = 0;
var rotate_angle_inc = 0.05;
//FUNCIÓN DE INICIALIZACIÓN
function init(){
ctx.clearRect (0, 0, 512, 512); //CLEAR CANVAS
ctx.fillStyle = 'rgba(128,128,128,1)';
ctx.strokeStyle = 'rgba(255,255,255,1)';
if (playAnimation) {
setInterval(draw,100);//
}
} //INIT
//FUNCIÓN DE DIBUJADO
function draw() {
//CLEAR BACKGROUND
ctx.clearRect (0, 0, 512, 512);
//DRAW ROTATING RECTANGLE
ctx.save();
ctx.translate( micanvas.width / 2, micanvas.height / 2 );
ctx.rotate( rotate_angle );
ctx.fillRect(0, 0, 100, 100);
ctx.restore();
//GET CANVAS IMAGE
var dataURL = micanvas.toDataURL("image/png");
//SET IMAGE AS BACKGROUND OF THE ELEMENTS
midiv.setStyle('background-image', 'url(' + dataURL + ')');
mibodi.setStyle('background-image', 'url(' + dataURL + ')');
//ANGLE INCREMENT
rotate_angle = rotate_angle + rotate_angle_inc;
} //DRAW
//BEGIN TO DRAW
init();
});//domeady
</script>
</head>
<body id="mibodi" >
<canvas id="micanvas" width="512" height="512" style="float:left;" style="display:none;">
Este texto se muestra para los navegadores no compatibles con canvas.
<br>
Por favor, utiliza Firefox, Chrome, Safari u Opera.
</canvas>
<div id="midiv" style="width:512px;height:512px;background:#f00;float:left;">
Sample
</div>
</body>
</html>
user1635543
Points
49
