设置画布到背景 - Javascript [英] Setting Canvas to Background - Javascript
本文介绍了设置画布到背景 - Javascript的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想弄清楚如何将我创建的画布转换为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 =canvaswidth =300pxheight =300px>< / canvas>
< / body>
解决方案>
像这个答案一样，您可以尝试：
$（'body'）css（{'background-image'：url（+ canvas.toDataURL（image / png）+）}
I am trying to figure out how to turn the canvas I have created into the background image of the HTML body. Thanks!
<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>
解决方案
Like on this answer, you can try this:
$('body').css({'background-image':"url(" + canvas.toDataURL("image/png")+ ")" });
这篇关于设置画布到背景 - Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
