我可以使用 canvas 元素作为 css 背景吗？
使用 <canvas> 作为 CSS 背景
IT技术
javascript
css
canvas
2021-01-15 22:46:12
6个回答
自 2008 年以来，这在 WebKit 中已成为可能，请参见此处。
<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 包含一项功能，允许您以这种方式使用任何元素（包括画布）作为 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 hacks。
是的！！！！您可以在 CSS 背景中放置一个画布。
var Canvas = document.createElement("canvas");
... do your canvas drawing....
$('body').css({'background-image':"url(" + Canvas.toDataURL("image/png")+ ")" });
我知道这是一个很老的问题，但我想为访问此页面的人发布我的答案，因为这是正确的答案，只需一行代码，使用该.toDataURL函数。它适用于所有支持画布的浏览器。
我认为你能得到的最接近的是渲染成canvas，调用toDataUrl()它以将内容作为图像检索，并将结果分配给所需元素的background-image属性。不过，这只会提供静态背景。canvas但是，如果您希望能够进一步更新，那么您需要将画布放置在另一个元素后面，正如 Johan 已经建议的那样。
我一直triying达到过去几周此相同的功能，最好的解决办法，我发现它的提出同样的BCAT：
- 渲染画布（可见或隐藏）
- 使用“canvas.toDataURL”获取画布图像
- 将此图像数据指定为元素的背景图像（我使用 MooTools）
坏消息是，静态图像效果很好，但 Chrome 中的动画有时会“闪烁”，而在 Firefox 中会闪烁很多次。也许有人知道一种解决方法来摆脱这种“讨厌的眨眼”。
最好的祝福。
普：。
<!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>
在 Firefox 中尝试-moz-element(#id)使用 CSS background。
而-webkit-canvas(name)对CSSbackground的WebKit的基于浏览器。