小智 62
自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.
fre*_*hie 58
是!!!!您可以在CSS背景中放置画布.
var Canvas = document.createElement("canvas");
... do your canvas drawing....
$('body').css({'background-image':"url(" + Canvas.toDataURL("image/png")+ ")" });
我知道这是一个非常古老的问题,但我想为那些访问此页面的人发布我的答案,因为这是正确的答案,只需一行代码,使用该.toDataURL功能.它适用于支持画布的每个浏览器.
bca*_*cat 11
我认为你可以得到的最接近的是渲染成a canvas,调用toDataUrl()它来检索作为图像的内容,并将结果分配给所需元素的background-image属性.但这只会给出静态背景.canvas但是,如果您希望能够进一步更新,那么您需要将画布放在另一个元素后面,就像Johan已经建议的那样.