我试图弄清楚如何将我创建的画布转换为 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
现场演示 http://jsfiddle.net/loktar/R9abU/
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);
}
有关 webkit 方法的更多信息 http://updates.html5rocks.com/2012/12/Canvas-driven-background-images
有关 Firefox 方法的更多信息 https://developer.mozilla.org/en-US/docs/Web/API/document.mozSetImageElement
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
