将HTML画布设置为页面背景 [英] Set HTML Canvas as page background
本文介绍了将HTML画布设置为页面背景的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我制作了一个我想要成为我的首页背景的JS动画： http://geotheory.co .uk / 。但我对网络开发很陌生，不清楚如何阻止画布元素在页面上的内联对象，并将其设置在其他HTML元素的后面。非常感谢的建议。 HTML是：
<！DOCTYPE html>
< html lang =en>
< head>
< meta charset =utf-8/>
< title> geotheory.co.uk< / title>
< style>
canvas：focus {outline：none;}
* {
margin：0;
padding：0;
}
h1 {color：#fff;}
p {color：#fff;}
< / style>
< / head>
< body id =homebgcolor =black>
<！ - style =overflow：hidden; - >
< h1>标题< / h1>
< p>段落1< / p>
< p>段落2< / p>
< script src =processing-1.4.1.min.js>< / script>
< div id =canvasContainer>
< canvas data-processing-sources =rectangles.pde>< / canvas>
< / div>
< / body>
解决方案
position：absolute;
top：0;
left：0;
width：100％;
height：100％;
z-index：-1;
}
I've made a JS animation that I want to be the background of my homepage: http://geotheory.co.uk/. But I'm quite new to web development and unclear how to stop the canvas element being an 'inline' object on the page and set it behind other HTML elements. Very grateful for advice. The HTML is:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>geotheory.co.uk</title> <style> canvas:focus{outline:none;} * { margin: 0; padding: 0; } h1 {color:#fff;} p {color:#fff;} </style> </head> <body id="home" bgcolor="black"> <!-- style="overflow:hidden;" --> <h1>Heading</h1> <p>paragraph 1</p> <p>paragraph 2</p> <script src="processing-1.4.1.min.js"></script> <div id="canvasContainer"> <canvas data-processing-sources="rectangles.pde"></canvas> </div> </body>
解决方案canvas { position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; }
这篇关于将HTML画布设置为页面背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
