1. Inicio
  2. Pregunta y respuesta
  3. Use <canvas> como fondo CSS

Use <canvas> como fondo CSS

2010-08-03 21 views
48

¿Puedo utilizar el elemento canvas como fondo CSS?Use <canvas> como fondo CSS

Fuente

2010-08-03 Ben Shelock

+0

Se puede utilizar un elemento de tela como fondo, pero CSS no tiene nada que ver con eso. – tcooc

+1

¡Sí, puedes! $ ('cuerpo'). css ({'background-image': "url (" + Canvas.toDataURL ("image/png") + ")"}); Vea mi respuesta a continuación: una línea de código y compatible con varios navegadores también. – frenchie

+0

Eso es ** NO ** haciendo del lienzo un fondo. Eso es hacer una copia del contenido del lienzo como una imagen y luego usar la imagen como fondo. – gman

Respuesta

60

Esto ha sido posible en WebKit desde 2008, vea 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 característica, que permite el uso de cualquier elemento (incluyendo 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 Mozilla hacks para obtener información específica.

Fuente

2011-01-09 21:28:05 livedo

+1

¡Agradable! No tenía idea de que pudieras hacer esto. Hice un jsfiddle desde su código aquí: [http://jsfiddle.net/cRqf6/](http://jsfiddle.net/cRqf6/) –

+0

Sólo he querido mencionar el truco de elemento de moho, pero tu fuiste el primero Por lo tanto, acabo de vivir un ejemplo - http://jsfiddle.net/U72dt/1/ – shabunc

+1

Ver mi respuesta a continuación: una línea de código y cross-compatible en todos los navegadores – frenchie

10

creo que lo más cerca que podría conseguir es hacer que en un canvas, llame toDataUrl() en él para recuperar el contenido como una imagen, y la asignación que resultan a background-image la propiedad 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á ubicar el lienzo detrás de otro elemento, como Johan ya ha sugerido.

Fuente

2010-08-03 14:22:29 bcat

3

He estado triying para lograr esta misma característica últimas semanas, la mejor solución que he encontrado es el mismo propuesto por bcat:

  1. Render lienzo (visible u oculto)
  2. Get imagen lona con "canvas.toDataURL"
  3. Asign esta imagen: datos de la imagen de fondo del elemento (utilizo MooTools)

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

Saludos cordiales.
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>

Fuente

2011-07-22 11:39:36 Putuko

55

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 esto es una pregunta bastante viejo, pero me sentí como publicar mi respuesta para la gente que nos visitaba esta página porque esta es la respuesta correcta, en una sola línea de código, usando la función .toDataURL. Funciona en todos los navegadores compatibles con canvas.

Fuente

2012-02-20 22:15:12 frenchie

+5

El único problema con esto es que el lienzo no se puede modificar después de establecerse como fondo. –

+2

Es cierto, pero hay una solución fácil, si es necesario. Simplemente cree una copia del lienzo y almacénelo como global para que cuando aplique .toDataURL() todavía haya un lienzo disponible. En general, no veo cómo otras respuestas propuestas pueden superar esta solución de una sola línea. – frenchie

+6

@frenchie Las otras respuestas superaron a su línea única porque: Usar toDataURL ya fue propuesto en las otras respuestas, 18 meses antes que usted. Además, no responde la pregunta. Es un trabajo alrededor. Su código no pone un lienzo en el fondo de CSS. Pone los datos de imagen momentáneos de un lienzo en fondo CSS. – Robert

4

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

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

Fuente

2012-11-04 13:27:03 user1635543

0

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

Esta respuesta se basa fuera de @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>

Fuente

2015-10-30 05:54:56 MDooley47

+0

Esto está en desuso https://groups.google.com/a /chromium.org/forum/#!topic/blink-dev/WvqvdsmiQzg –

0

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

Trabajando JSComunicado aquí. Yo no escribo esto, todo el crédito va a Derek Leung:

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

Fuente

2017-03-29 23:03:02

Cuestiones relacionadas

 Cuestiones relacionadas