将HTML画布设置为页面背景

Z时代
2024-01-10
分类：问答

我制作了一个JS动画，希望作为主页的背景。但是我对Web开发还是很陌生，还不清楚如何阻止canvas元素成为页面上的“内联”对象，并将其设置在其他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="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>