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

网友评论0