鼠标跟随六边形特效（原创）

Html

Css

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

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: function() {
         if (this.distanceFromMouse > 20) {
             this.x += (mouse.x - this.x) * this.speed;
             this.y += (mouse.y - this.y) * this.speed;
             if (this.distanceFromMouse < mouse.size) {
                 this.size += (0 - this.size) * this.speed;
                 this.speed += .01;
             } else {
                 this.size += (this.origSize - this.size) * this.speed;
             }
         } else {
             this.init();
         }
     }
 }

mouse.move = function() {
     if (!distance(mouse.x, mouse.y, mouse.tx, mouse.ty) <= .1) {
         mouse.x += (mouse.tx - mouse.x) * .2;
         mouse.y += (mouse.ty - mouse.y) * .2;
     }
 };

mouse.touches = function(e) {
     var touches = e.touches;
     if (touches) {
         mouse.tx = touches[0].clientX;
         mouse.ty = touches[0].clientY;
     } else {
         mouse.tx = e.clientX;
         mouse.ty = e.clientY;
     }
     e.preventDefault();
 };

mouse.mouseleave = function(e) {
     mouse.tx = w / 2;
     mouse.ty = h / 2;
 };

window.addEventListener("mousemove", mouse.touches);
 window.addEventListener("touchstart", mouse.touches);
 window.addEventListener("touchmove", mouse.touches)

c.addEventListener("mouseleave", mouse.mouseleave)

window.addEventListener("resize", function() {
     w = c.width = window.innerWidth;
     h = c.height = window.innerHeight;
 });

for (var i = 1; i <= maxParticles; i++) {
     setTimeout(function() {
         var p = new P();
         p.init();
         particles.push(p);
     }, i * 50);
 }

function anim() {
     ctx.fillStyle = clearColor;
     ctx.shadowColor = clearColor;
     ctx.shadowBlur = 0;
     ctx.globalCompositeOperation = "source-over";
     ctx.fillRect(0, 0, w, h);
     mouse.move();

for (var i in particles) {
         var p = particles[i];
         p.draw();
     }
     hue++;
     requestAnimationFrame(anim);
 }

anim();

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

鼠标跟随六边形特效（原创）

代码描述：canvas鼠标跟随七彩颜色特效

更新时间：2019-08-20 08:41:49
此特效可用于网页背景和游戏登录背景界面

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

笑着哭??・fighting →

相关代码

鼠标跟随六边形特效（原创）

最新