使用<canvas>作为CSS背景

我可以使用canvas元素作为CSS背景吗?

WebKit自2008年以来就可以实现这一点,请参阅此处

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

目前,Firefox 4包含一个function,它允许您以这种方式使用任何元素(包括canvas)作为CSS背景:

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

有关详细信息,请参阅Mozilla黑客程序。

是!!!! 你可以把一个canvas放在CSS背景中。

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

我知道这是一个相当古老的问题,但是我觉得就像是发布我的答案,因为这是正确的答案,只需一行代码,使用.toDataURL函数就可以访问这个页面。 它适用于每个支持canvas的浏览器。

我认为最接近你可以得到的是渲染成一个canvas ,调用它的toDataUrl()检索内容作为一个图像,并将结果赋予所需的元素的background-image属性。 这只会给一个静态的背景,但。 但是,如果您想要进一步更新canvas ,则需要将canvas放在另一个元素的后面,正如Johan所build议的那样。

在Firefox中试用CSS background -moz-element(#id)

基于WebKit的浏览器中用于CSS background -webkit-canvas(name)

我一直在试图在过去的几个星期里实现这个function,我发现最好的解决scheme是由bcat提出的:

  1. 渲染canvas(可见或隐藏)
  2. 用“canvas.toDataURL”获取canvas图像
  3. 将此图像数据作为元素的背景图像(我使用MooTools)

坏消息, 静态图像效果很好 ,但Chrome中的animation有时会“闪烁” ,而Firefox在闪烁 。 也许有人知道一个解决方法来摆脱这个“讨厌的眨眼”。

最好的祝福。
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> 

无法评论,所以我会为此创build自己的答案。

这个答案基于@livedo,@Eric Rowell和@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> 

你可以快速地模拟这种行为,而不用使用z-indextoDataURL()的性能下降( toDataURL() ,这是一种解决方法,因为截至2017年CSS样式4 / CSS Houdini还没有实现“background:element(#mycanvas)”))

在这里工作JSFiddle。 我没有写这个,所有的功劳都归Derek Leung所有 :

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