粒子下雨特效

代码语言:html

所属分类:粒子

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        * {
            margin: 0;
        }
        canvas {
            background: #000;
            height: 100%;
            width: 100%;
            position: absolute;

        }
    </style>

</head>
<body translate="no">
    <div>
        <canvas></canvas>
    </div>

    <script>
        (function () {

            window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame;

            var canvas = document.querySelector("canvas");
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            var ctx = canvas.getContext("2d");
            ctx.globalCompositeOperation = "source-over";
            var particles = [];
            var pIndex = 0;
            var x, y, frameId;

            function Dot(x, y, w, h) {
                this.x = x;
                this.y = y;
                this.width = w;
                this.height = h;
                particles[pIndex] = this;
                this.id = pIndex;
                pIndex++;
                this.life = 0;
                this.maxlife = getRandom(1, 3);
                this.alpha = getRandom(0.01, 0.2);

            };

            Dot.prototype.draw = function (x, y) {
    .........完整代码请登录后点击上方下载按钮下载查看

网友评论0