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;
        		
        		for(var i = 0; i < 6; i++) {
        			a = i*ba;
        			x = this.x + HEX_CRAD*cos(a);
        			y = this.y + HEX_CRAD*sin(a);
        			
        			this.points.hex.push({
        				'x': x, 
        				'y': y
        			});
        			
        			if(i > 2) {
        				x = this.x + ri*cos(a);
        				y = this.y + ri*sin(a);
        				
        				this.points.hl.push({
        					'x': x, 
        					'y': y
        				});
        			}
        		}
        	};
        	
        	this.draw  = function(ct) {
        		for(var i = 0; i < 6; i++) {
        			ct[(i === 0?'move':'line')+ 'To'](
        				this.points.hex[i].x, 
        				this.points.hex[i].y
        			);
        		}
        	};
        	
        	this.highlight = function(ct) {
        		for(var i = 0; i < 3; i++) {
        			ct[(i === 0?'move':'line')+ 'To'](
        				this.points.hl[i].x, 
        				this.points.hl[i].y
        			);
        		}
        	};
        	
        	this.init();
        };
        
        var Grid = function(rows, cols) {
        	t.........完整代码请登录后点击上方下载按钮下载查看