Question

所以我把所有东西都完美地工作，它看起来不错，除了画布占据了整个屏幕，我无法点击导航菜单中的任何内容。我尝试在不同的东西周围添加div标签并更改z-index，但它不会改变任何东西。这就是我所拥有的：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="tvTheme.css">
</head>
<body>
    <div style="position: absolute;">
        <canvas style="position: absolute;">Your browser does not support canvas, or you are blocking JavaScript from running</canvas>
    </div>
    <h1 style="position: absolute; padding-left: 3%;"> P F N </h1>
    <nav style="padding-top: 4%;">
        <a href="shows.php" style="color: white;"> Home </a>
        <a href="allShows.php"> TV Shows </a>
        <a href="tvAbout.php"> About </a>
        <a href="tvLegal.php"> Legal </a>
        <a href="tvFAQ.html"> FAQ </a>
        <a href=""> Bookmark </a>
    </nav>
    <div style='width: 100%;'>
        <form id="search" action="search.php" method=POST style="width: 100%; text-align: center;"\>
            <input type="text" name="term" placeholder="Search...">
        </form>
    </div>
    <script>
        //#dda56e
        var canvas = document.querySelector('canvas');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        var context = canvas.getContext('2d');
        var tau = 2 * Math.PI;

        function Triangle(canvs, cnt, sid, f) {
            this.phase = 0;
            this.ctx = canvs.getContext('2d');
            this.first = f;
            this.sides = sid;
            this.canv = canvs;
            this.draw = drawTriangle;
            this.size = screen.width/12;
            this.red = 221;
            this.green = 163;
            this.blue = 107;
        }

        function drawTriangle() {
            requestAnimationFrame(drawTriangle.bind(this));
            var x = 0;
            var y = 0;
            var centerX = this.canv.width/10;
            var centerY = this.canv.height/7;
            this.phase += 0.005 * tau;

            if(this.first == 1) {
                this.ctx.clearRect(0, 0, this.canv.width, this.canv.height);
            }
            this.ctx.beginPath();
            for (var i = 0; i <= this.sides; i++) {
                this.ctx[i ? 'lineTo' : 'moveTo'](
                    centerX + this.size * Math.cos(this.phase + i / this.sides * tau),
                    centerY + this.size * Math.sin(this.phase + i / this.sides * tau)
                );
            }
            this.ctx.strokeStyle = "rgba("+this.red+","+this.green+","+this.blue+",0.3)";
            this.red++;
            this.green-=.5;
            this.blue--;
            this.ctx.stroke();
            this.size--;
            if(this.size < 1) {
                this.size = 0;
            }
        }

        var collection = [];

        var triangle1 = new Triangle(canvas,context,3,1);
        triangle1.draw();

        var i = 0;
        function nextFrame() {
            if(i < 100000) {
                collection[i] = new Triangle(canvas,context,3,0);
                collection[i].draw();
                i++;
                setTimeout(nextFrame, 100);
            }
        }
        setTimeout(nextFrame, 0);
    </script>
</body>
</html>

如何让画布位于页面上的所有元素后面，但在主体背景上方？我知道这是非常糟糕的措辞所以如果您需要链接到该网站，请告诉我。

Answer 1

您可以在包含画布的div上使用pointer-events: none;。见here

使用动画画布作为背景

1 个答案: