canvas实现粒子下落遮挡弹起动画效果-html代码-BFW代码库

canvas实现粒子下落遮挡弹起动画效果

代码语言：html

所属分类：粒子

代码描述：canvas实现粒子下落遮挡弹起动画效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        #title {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 100px;
            border-top: 3px solid black;
        }
    </style>



</head>

<body translate="no">
    <canvas id="canvas"></canvas>
    <h1 id="title">BFW.WIKI</h1>



    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        canvas.height = window.innerHeight;
        canvas.width = window.innerWidth;
        let particalArray = [];
        const numberOfParticales = 300;
        const titleElement = document.getElementById('title');
        let titleMeasurement = titleElement.getBoundingClientRect();
        let title = {
            x: titleMeasurement.left,
            y: titleMeasurement.top,
            width: titleMeasurement.width,
            height: 10
        };

        class Particle {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.size = Math.random() * 15 + 1;
                this.weight = Math.random() * 1 + 1;
                this.directionX = -1;
            }

            update() {
                if (this.y > canvas.height) {
                    this.y = 0 - this.size;
                    this.weight = Math.random() * 1 + 1;
                    this.x = Math.random() * canvas.width * 1.5;
                }
                this.weight += 0.01;
                this.y += this.weight;
                this.x += this.directionX;
                if (
          .........完整代码请登录后点击上方下载按钮下载查看