js实现canvas悬浮六边形蜂窝彩色效果代码-html代码-BFW代码库

js实现canvas悬浮六边形蜂窝彩色效果代码

代码语言：html

所属分类：悬停

代码描述：js实现canvas悬浮六边形蜂窝彩色效果代码

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

<html>

<head>
    <style>
        html, body, canvas {
          height: 100%;
        }
        
        html {
          overflow: hidden;
          background: #020202;
        }
        
        body {
          margin: 0;
        }
        
        canvas {
          position: absolute;
          width: 100%;
        }
    </style>
   
</head>

<body>
    <canvas></canvas>
<canvas></canvas>
    <script>
        /* because me lazy */
        Object.getOwnPropertyNames(Math).map(function(p) {
                window[p] = Math[p];
        });
        
        var HEX_CRAD = 32, 
                        HEX_BG = '#171717', 
                        HEX_HL = '#2a2a2a', 
                        HEX_HLW = 2, 
                        HEX_GAP = 4, 
                        NEON_PALETE = [
                                '#cb3301', '#ff0066', 
                                '#ff6666', '#feff99', 
                                '#ffff67', '#ccff66', 
                                '#99fe00', '#fe99ff', 
                                '#ff99cb', '#fe349a', 
                                '#cc99fe', '#6599ff', 
                                '#00ccff', '#ffffff'
                        ], 
                        T_SWITCH = 64, 
                        
                        unit_x = 3*HEX_CRAD + HEX_GAP*sqrt(3), 
                        unit_y = HEX_CRAD*sqrt(3)*.5 + .5*HEX_GAP, 
                        off_x = 1.5*HEX_CRAD + HEX_GAP*sqrt(3)*.5, 
                        
                        /* extract a work palette */
                        wp = NEON_PALETE.map(function(c) {
                                var num = parseInt(c.replace('#', ''), 16);
                                
                                return {
                                        'r': num >> 16 & 0xFF, 
                                        'g': num >> 8 & 0xFF, 
                                        'b': num & 0xFF
                                };
                        }), 
                        nwp = wp.length, csi = 0, 
                        
                        f = 1/T_SWITCH, 
                        
                        c = document.querySelectorAll('canvas'), 
                        n = c.length, w, h, _min, 
                        ctx = [], 
                        grid, source = null, 
                        t = 0, request_id = null;
        
        var GridItem = function(x, y) {
                this.x = x || 0;
                this.y = y || 0;
                this.points = { 'hex': [], 'hl': [] };
                
                this.init = function() {
                        var x, y, a, ba = PI/3, 
                                        ri = HEX_CRAD - .5*HEX_HLW;
                        
                        f.........完整代码请登录后点击上方下载按钮下载查看