Question

我需要这个。我创建了一个JavaScript动画并将其用作我网站的背景，但是当我在屏幕宽度以下添加部分和div时，它会将其放在下面，但我无法滚动到它们。有人可以帮帮忙吗？谢谢。我将粘贴HTML和JavaScript。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Canvas - Chris Courses</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
    <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville|Poppins|Roboto" rel="stylesheet">

</head>
<body onload="canvasBg()">
    <canvas></canvas>

    <section id="body section">
        <div id="top-info">
            <div class="container">
                <h1>Hello!, my name is Anjolaoluwa.</h1>
                <h2>But call me <span>AJ.</span></h2>
                <h4>specializing in Web Design, Web Development, and Mobile Development.</h4>
            </div>
        </div>

        <div id="about-section">
            <div class="container">
                <div class="well">
                    <div class="row">
                        <div class="col-lg-8">
                            <h3>Who is Behind All This</h3>
                            <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet egestas dolor, a convallis turpis.</h5>
                        </div>
                        <div class="col-lg-4"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>





    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/canvas.js"></script>
</body>
</html>


and the JavaScript is:

function canvasBg(){
    let canvas = document.querySelector('canvas');

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    let c = canvas.getContext('2d');


    /* ANIMATING THE CANVAS */
    let mouse = {
        x: undefined,
        y: undefined
    }

    let maxRadius = 40;
    let minRadius = 2;

    let colorArray = [
        '#F1A9A0',
        '#663399',
        '#9B59B6',
        '#87D37C',
        '#F89406',
        '#AEA8D3',
        '#3498DB',
        '#FF5733',
        '#581845',
        '#900C3F',
        '#1ABC9C'
    ];

    window.addEventListener('mousemove', (e) => {
        mouse.x = e.x;
        mouse.y = e.y;
    });

    window.addEventListener('resize', () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        init();
    });

    let two_pi = Math.PI * 2;

    function Circle(x, y, dx, dy, radius){
        this.x = x;
        this.y = y;
        this.dx = dx;
        this.dy = dy;
        this.radius = radius;
        this.minRadius = radius;
        this.color = colorArray[Math.floor(Math.random() * colorArray.length)];

        this.draw = () => {
            c.beginPath();
            c.arc(this.x, this.y, this.radius, 0, two_pi, false);
            c.fillStyle = this.color;

            c.fill();
        }

        this.update = () => {
            if(this.x + this.radius > innerWidth || this.x - this.radius < 0){
                this.dx = -this.dx;
            }

            if(this.y + this.radius > innerHeight || this.y - this.radius < 0){
                this.dy = -this.dy;
            }

            this.x += this.dx;
            this.y += this.dy;

            // Interactivity occurs here
            if(mouse.x - this.x < 50 && 
                mouse.x - this.x > -50 && 
                mouse.y - this.y < 50 && 
                mouse.y - this.y > -50) {
                //code
                if(this.radius < maxRadius){
                    this.radius += 1;
                }
            } else if(this.radius > this.minRadius){
                this.radius -= 1;
            }

            this.draw();
        }
    }





    var circleArray = [];

    function init(){
        circleArray = [];

        for(let i = 0; i < 1600; i++){
            let radius = Math.random() * 3 + 1;
            let x = Math.random() * (innerWidth - radius * 2) + radius;
            let y = Math.random() * (innerHeight - radius * 2) + radius;
            let dx = (Math.random() - 0.5);
            let dy = (Math.random() - 0.5);


            circleArray.push(new Circle(x, y, dx, dy, radius));
            var circle = new Circle(200,200, 3, 3, 30);
        }
    }

    function animate(){
        requestAnimationFrame(animate);

        c.clearRect(0, 0, innerWidth, innerHeight);

        for(let i = 0; i < circleArray.length; i++){
            circleArray[i].update();
        }
    }

    animate();`
}

HTML Canvas不向下滚动

0 个答案: