js实现canvas彩色六边形跟随鼠标虹吸动画效果代码-html代码-BFW代码库

js实现canvas彩色六边形跟随鼠标虹吸动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现canvas彩色六边形跟随鼠标虹吸动画效果代码

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

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas六角型</title>

    <style>
        body {
          background: black;
          overflow: hidden;
          /* cursor: none; */
        }
    </style>

</head>

<body>

    <canvas id='canvas-club'></canvas>


    <script>
        window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;
        
        var c = document.getElementById("canvas-club");
        var w = c.width = window.innerWidth;
        var h = c.height = window.innerHeight;
        var ctx = c.getContext("2d");
        
        var maxParticles = 30;
        var particles = [];
        var hue = 183;
        
        mouse = {};
        mouse.size = 200;
        mouse.x = mouse.tx = w/2;
        mouse.y = mouse.ty = h/2;
        
        var clearColor = "rgba(0, 0, 0, .2)";
        
        function random(min, max){
        	return Math.random() * (max - min) + min
        }
        
        function distance(x1, y1, x2, y2){
        	return Math.sqrt( (x1-x2)*(x1-x2) + (y1-y2)*(y1-y2) );
        }
        
        function P(){}
        
        P.prototype = {
        	init: function(){
        		this.size = this.origSize = random(10, 100);
        		this.x = random(0, w);
        		this.y = Math.random() > .5 ? -this.size : h + this.size;
        		this.speed = this.origSpeed = random(.01, .03);
        	},
        	
        	draw: function(){
        		this.distanceFromMouse = distance(this.x, this.y, mouse.x, mouse.y);
        		ctx.strokeStyle = "hsla("+hue+", 90%, 50%, 1)";
        		ctx.shadowColor = "hsla("+hue+", 100%, 55%, 1)";
        		ctx.shadowBlur = this.size * 2;
        		ctx.beginPath();
        		ctx.moveTo(this.x + this.size * Math.cos(0), this.y + this.size *  Math.sin(0));
        		
        		for(var i=0; i<6; i++){
        			ctx.lineTo(this.x + this.size * Math.cos(i * 2 * Math.PI / 6), this.y + this.size * Math.sin(i * 2 * Math.PI / 6));
        		}   
        		
        		ctx.closePath();
        		ctx.lineWidth = 3;
        		ctx.stroke();
        		this.update();
        	},
        	
        	update:.........完整代码请登录后点击上方下载按钮下载查看