canvas随机色彩光束粒子爆炸动画效果代码-html代码-BFW代码库

canvas随机色彩光束粒子爆炸动画效果代码

代码语言：html

所属分类：粒子

代码描述：canvas随机色彩光束粒子爆炸动画效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        body {
            background: #000;
            overflow: hidden;
        }

        canvas {
            display: block;
        }
    </style>

</head>
<body>
    <canvas id="c"></canvas>

    <script>

        /*
	click to clear and change hue

	don't look at or judge this code
	I just kept tweaking values and
	adding random things in a messy way
	it's full of magic numbers
*/

        var c,
        ctx,
        w,
        h,
        cx,
        cy,
        branches,
        startHue,
        tick;

        function rand(min, max) {
            return Math.random() * (max - min) + min;
        }

        function randInt(min, max) {
            return Math.floor(min + Math.random() * (max - min + 1));
        };

        function Branch(hue, x, y, angle, vel) {
            var move = 15;
            this.x = x + rand(-move, move);
            this.y = y + rand(-move, move);
            this.points = [];
            this.angle = angle != undefined ? angle: rand(0, Math.PI * 1);
            this.vel = vel != undefined ? vel: rand(-4, 4);
            this.spread = 0;
            this.tick = 0;
            this.hue = hue != undefined ? hue: 200;
            this.life = 1;
            this.decay = 0.0015;
            this.dead = false;

            this.points.push({
                x: this.x,
                y: this.y
            });
        }

        Branch.prototype.step = function(i) {
            this.life -= this.decay;
            if (this.life <= 0) {
                this.dead = true;
            }

            if (!this.dead) {
                var lastPoint = this.points[this.points.length - 1];
                this.points.push({
                    x: lastPoint.x + Math.cos(this.angle) * this.vel,
                    y: lastPoint.y + Math.sin(this.angle) * this.vel
                });
                this.angle += rand(-this.spread, this.spread);
                this.vel *= 0.99;
                this.spread = this.vel * 0.04;
                this.tick++;
                this.hue += 0.3;
            } else {
                branches.splice(i, 1);
            }
        };

        Branch.prototype.draw = function() {
            if (!this.points.length || this.dead) {
                return false;
            }

            var length = this.points.length,
            i = length - 1,
   .........完整代码请登录后点击上方下载按钮下载查看