js滑鼠軌跡特效
阿新 • • 發佈：2022-01-18
今天無意中訪問到了開源社群 (apiopen.top)的主介面，發現滑鼠跟隨的特效不錯（殘留軌跡），弄下來玩玩
上程式碼
我整合後只需要兩部分，匯入JS依賴後，在html 新增 id 為mouseCanvas 的 Canvas標籤就行
1、HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>測試</title> <!-- 引入依賴js --> <scriptsrc="./mouseCanvas.js"></script> </head> <body> <!-- 只需要一個Id為 mouseCanvas 的canvas標籤 --> <canvas id="mouseCanvas"></canvas> </body> </html>
2、js
var SCREEN_WIDTH=window.innerWidth;var SCREEN_HEIGHT=window.innerHeight;var RADIUS=70;varQUANTITY=25;var RADIUS_SCALE=1;var RADIUS_SCALE_MIN=1;var RADIUS_SCALE_MAX=1.5;var canvas;var context;var particles;var mouseX=SCREEN_WIDTH*0.5;var mouseY=SCREEN_HEIGHT*0.5;var mouseIsDown=false;function init(){canvas=document.getElementById('mouseCanvas');if(canvas&&canvas.getContext){context=canvas.getContext('2d');window.addEventListener('mousemove',documentMouseMoveHandler,false);window.addEventListener('mousedown',documentMouseDownHandler,false);window.addEventListener('mouseup',documentMouseUpHandler,false);document.addEventListener('touchstart',documentTouchStartHandler,false);document.addEventListener('touchmove',documentTouchMoveHandler,false);window.addEventListener('resize',windowResizeHandler,false);createParticles();windowResizeHandler();setInterval(loop,1000/60)}}function createParticles(){particles=[];for(var i=0;i<QUANTITY;i++){var particle={size:1,position:{x:mouseX,y:mouseY},offset:{x:0,y:0},shift:{x:mouseX,y:mouseY},speed:0.01+Math.random()*0.04,targetSize:1,fillColor:'#'+(Math.random()*0x904040+0xaaaaaa|0).toString(16),orbit:RADIUS*.5+(RADIUS*.5*Math.random())};particles.push(particle)}}function documentMouseMoveHandler(event){mouseX=event.clientX-(window.innerWidth-SCREEN_WIDTH)*.5;mouseY=event.clientY-(window.innerHeight-SCREEN_HEIGHT)*.5}function documentMouseDownHandler(event){mouseIsDown=true}function documentMouseUpHandler(event){mouseIsDown=false}function documentTouchStartHandler(event){if(event.touches.length==1){event.preventDefault();mouseX=event.touches[0].pageX-(window.innerWidth-SCREEN_WIDTH)*.5;mouseY=event.touches[0].pageY-(window.innerHeight-SCREEN_HEIGHT)*.5}}function documentTouchMoveHandler(event){if(event.touches.length==1){event.preventDefault();mouseX=event.touches[0].pageX-(window.innerWidth-SCREEN_WIDTH)*.5;mouseY=event.touches[0].pageY-(window.innerHeight-SCREEN_HEIGHT)*.5}}function windowResizeHandler(){SCREEN_WIDTH=window.innerWidth;SCREEN_HEIGHT=window.innerHeight;canvas.width=SCREEN_WIDTH;canvas.height=SCREEN_HEIGHT}function loop(){if(mouseIsDown){RADIUS_SCALE+=(RADIUS_SCALE_MAX-RADIUS_SCALE)*(0.02)}else{RADIUS_SCALE-=(RADIUS_SCALE-RADIUS_SCALE_MIN)*(0.02)}RADIUS_SCALE=Math.min(RADIUS_SCALE,RADIUS_SCALE_MAX);context.fillStyle='rgba(0,0,0,0.05)';context.fillRect(0,0,context.canvas.width,context.canvas.height);for(i=0,len=particles.length;i<len;i++){var particle=particles[i];var lp={x:particle.position.x,y:particle.position.y};particle.offset.x+=particle.speed;particle.offset.y+=particle.speed;particle.shift.x+=(mouseX-particle.shift.x)*(particle.speed);particle.shift.y+=(mouseY-particle.shift.y)*(particle.speed);particle.position.x=particle.shift.x+Math.cos(i+particle.offset.x)*(particle.orbit*RADIUS_SCALE);particle.position.y=particle.shift.y+Math.sin(i+particle.offset.y)*(particle.orbit*RADIUS_SCALE);particle.position.x=Math.max(Math.min(particle.position.x,SCREEN_WIDTH),0);particle.position.y=Math.max(Math.min(particle.position.y,SCREEN_HEIGHT),0);particle.size+=(particle.targetSize-particle.size)*0.01;if(Math.round(particle.size)==Math.round(particle.targetSize)){particle.targetSize=1+Math.random()*2}context.beginPath();context.fillStyle=particle.fillColor;context.strokeStyle=particle.fillColor;context.lineWidth=particle.size;context.moveTo(lp.x,lp.y);context.lineTo(particle.position.x,particle.position.y);context.stroke();context.arc(particle.position.x,particle.position.y,particle.size/2,0,Math.PI*2,true);context.fill()}}window.onload=function(){document.getElementById('mouseCanvas').style="width:100%;height:100%;position: fixed;top: 0;left: 0;z-index: -999;";document.getElementsByTagName('html')[0].style='margin:0;width:100%;height:100%;';document.getElementsByTagName('body')[0].style='margin:0;width:100%;height:100%;';init()};
效果：