我试图弄清楚如何将我创建的 Canvas 变成 HTML 正文的背景图像。谢谢!
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
canvas.style.background = '#D1E0FF';
var context = canvas.getContext("2d");
for (i=0; i<20; i++) {
context.fillStyle = '#FF8533';
context.fillRect (
Math.round(Math.random()*300*100)/100,
Math.round(Math.random()*300*100)/100,
30,
30
);
}
var backgroundURL = canvas.toDataURL();
???
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="300px" height="300px"></canvas>
</body>
最佳答案
通过 CSS，您可以使用
-webkit-canvas 当然仅适用于 webkit 浏览器。要在 Firefox 上实现类似的效果，您可以使用
-moz-element
<强> Live demo
CSS
body{
background: -webkit-canvas(background);
}
JavaScript
var ctx = document.getCSSCanvasContext('2d', 'background', 300, 300);
// make some random rects
var i = 50;
while(i--){
ctx.fillRect(Math.random()*300, Math.random()*300, Math.random()*50, Math.random()*50);
}
关于javascript - 将 Canvas 设置为背景 - Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20642485/