js实现canvas霓虹灯动画效果代码-html代码-BFW代码库

js实现canvas霓虹灯动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现canvas霓虹灯动画效果代码

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

<html>
<head>
    <style>
        body {
            background: hsl(235,60%,13%);
            /*#051a41;*/
            margin: 0;
            overflow: hidden;
        }
    </style>

</head>
<body>
    <canvas id="canvas" width="660" height="611"></canvas>
    <script>
        (function() {
            "use strict";

            // Canvas things
            var canvas = document.getElementById('canvas'),
            ctx = canvas.getContext('2d'),
            canvasWidth = canvas.width = window.innerWidth,
            canvasHeight = canvas.height = window.innerHeight;

            // Mouse things
            var mouseX,
            mouseY,
            pop = false,
            attract = false;

            // Check if mouse event is over a bubble
            var mouseOver = function(x, y, radius) {
                var diffX = mouseX - x;
                var diffY = mouseY - y;

                if (diffX < radius && diffX > (radius * -1) && diffY < radius && diffY > (radius * -1)) {
                    return true;
                }

                return false;
            }

            // Used for randomizing everything
            var randomNum = function (min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            };

            // Used for changing settings with a random number
            var changeSettings = function(setting, min, max, prob) {
                var chance = randomNum(0, prob);

                if (setting < min || chance === 1) {
                    return 1;
                } else if (setting > max || chance === 2) {
                    return -1;
                } else {
                    return 0;
                }
            };

            // Bubble config
            var bubbles = [],
            // Holds all the bubbles as objects
            count = 0,
            // Bubble count
            maxCount = 10,
            // Max bubbles to render on start
            maxSize = 100,
            minSize = 5,
            minSpeed = 5,
            maxSpeed = 10,
            bgcolor = 'hsl(235,60%,13%)',
            // Canvas bg
            colors = [// Color palette
                {
                    color1: '#fa4c2b',
                    color2: '#6aff6e'
                },
                {
                    color1: '#ffff82',
                    color2: '#ffce72'
                },
                {
                    color1: '#fa4c2b',
                    color2: '#0bfcff'
                }];

            // Bubble constructor
            var Bubble = function(x, y, size) {
                this.id = count+1;
                this.x = x || randomNum(0, canvasWidth);
                this.y = y || randomNum(0, canvasHeight);
                this.radius = size || randomNum(minSize, maxSize);
                this.color = colors[randomNum(0, colors.length-1)];

                this.speed = randomNum(minSpeed, maxSpeed)/10;
                this.speedBackup = this.speed;
                this.directionX = randomNum(-1, 1) || 1;
                this.directionY = randomNum(-1, 1) || 1;
                this.flicker = 0;

                count++; // Number bubbles
                bubbles[count] = this; // Add to main object
            };

            // When popping a bubble
            Bubble.prototype.destroy = function() {
                // Generate number of smaller bubbles based on radius
                var popCount = this.radius/10 > 0 ? this.radius/10: 2;

                // Generate smaller bubbles, size based on radius
                for (var i = 0; i < popCount; i++) {
                    new Bubble(this.x, this.y, randomNum(this.radius/4, this.radius/2));
                }

                // Make popped bubble smaller and change color
                this.radius = randomNum(this.radius/4, this.radius/2);
                this.color = colors[randomNum(0, colors.length-1)];
            };

            // Bubble drawing animation
            Bubble.prototype.draw = function() {

                // Change direction randomly, default to same direction
                this.directionX = changeSettings(this.x, 0, canvasWidth, 500) || this.directionX;
                this.directionY = changeSettings(this.........完整代码请登录后点击上方下载按钮下载查看