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 :
- Renderizar lienzo (visible u oculto)
- Obtener imagen de lienzo con "canvas.toDataURL"
- 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 :
Puedes usar CSS Paint API
.elem {
backgound: paint(squares);
}
Ver más detalles aquí:
Publicaciones de blog:
https://vitaliy-bobrov.github.io/blog/exploring-the-css-paint-api/ https://vitaliy-bobrov.github.io/blog/css-paint-in-action-bar-chart/
¡¡¡¡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.