write w3schools tag p5js createcanvas code javascript css canvas

javascript - w3schools - text p5 js



Use<canvas> como fondo de CSS (8)

¿Puedo usar el elemento Canvas como fondo CSS?


Creo que lo más parecido que se puede obtener es hacer un canvas , llamar a toDataUrl() para recuperar los contenidos como una imagen y asignarlos a la propiedad de la background-image de background-image del elemento deseado. Sin embargo, esto solo dará un fondo estático. Sin embargo, si desea poder actualizar aún más el canvas , deberá colocar el lienzo detrás de otro elemento, como Johan ya ha sugerido.


Esto ha sido posible en WebKit desde 2008, mira here .

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

Actualmente, Firefox 4 contiene una función que le permite usar cualquier elemento (incluido el lienzo) como fondo de CSS, de esta manera:

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

Ver los hacks de Mozilla para detalles.


He estado tratando de lograr esta misma característica en las últimas semanas, la mejor solución que he encontrado es la misma propuesta por bcat :

  1. Renderizar lienzo (visible u oculto)
  2. Obtener imagen de lienzo con "canvas.toDataURL"
  3. Asignar esta imagen-datos como imagen de fondo para el elemento (yo uso MooTools)

Las malas noticias, para las imágenes estáticas funciona muy bien , pero con la animación en Chrome a veces "parpadea" , y en Firefox parpadea mucho . Tal vez alguien sepa una solución para deshacerse de este "desagradable parpadeo".

Atentamente.
PAG:.

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


No se puede comentar, así que crearé mi propia respuesta para esto.

Esta respuesta se basa en @livedo, @Eric Rowell y @shabunc

http://jsfiddle.net/MDooley47/yj26psdb/

window.i = 0; function draw(w, h) { window.i+=5; if (window.webkitURL != null) { var ctx = document.getCSSCanvasContext("2d", "squares", 100, 100); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, w, h); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, w, h); } else { var ctxmozc = document.getElementById("squares"); var ctxmoz = ctxmozc.getContext("2d"); ctxmoz.fillStyle = "rgb(200,0,0)"; ctxmoz.fillRect (10, 10, w, h); ctxmoz.fillStyle = "rgba(0, 0, 200, 0.5)"; ctxmoz.fillRect (30, 30, w, h); } } setInterval(function(){draw(window.i, window.i);}, 500);

div { background: -webkit-canvas(squares); background: -moz-element(#squares) repeat-x; width:575px; height:475px; border:2px solid black }

<body> <div></div> <canvas id="squares" name="squaresmoz" style="display: none;" ></canvas> </body>


Pruebe -moz-element(#id) para background CSS en Firefox.

Y -webkit-canvas(name) para background CSS en navegadores basados ​​en WebKit .


Puede emular este comportamiento rápidamente sin la caída de rendimiento de toDataURL() usando z-index (concedido, es una solución, ya que las imágenes CSS 4 / CSS Houdini no han implementado "background: element (#mycanvas)" a partir de 2017))

Trabajando JSFiddle aquí. No escribí esto, todo el crédito es para Derek Leung :

http://jsfiddle.net/DerekL/uw5XU/



¡¡¡¡Sí!!!! Puedes poner un lienzo en el fondo de CSS.

var Canvas = document.createElement("canvas"); ... do your canvas drawing.... $(''body'').css({''background-image'':"url(" + Canvas.toDataURL("image/png")+ ")" });

Sé que esta es una pregunta muy antigua, pero quería enviar mi respuesta a las personas que visitarían esta página porque esta es la respuesta correcta, en una sola línea de código, con la función .toDataURL . Funciona en todos los navegadores compatibles con canvas.