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) {
              .........完整代码请登录后点击上方下载按钮下载查看

网友评论0