JavaScript如何实现环绕鼠标旋转效果
JavaScript如何实现环绕鼠标旋转效果
今天就跟大家聊聊有关JavaScript如何实现环绕鼠标旋转效果，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
JavaScript是什么
JS是JavaScript的简称，它是一种直译式的脚本语言，其解释器被称为JavaScript引擎，是浏览器的一部分，主要用于web的开发，可以给网站添加各种各样的动态效果，让网页更加美观。
JavaScript实现环绕鼠标旋转效果：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>CanvasResize</title><styletype="text/css">/*清除默认边距*/*{margin:0;padding:0}html,body{/*设置浏览器宽高为100%*/width:100%;height:100%;}</style></head><body><!--canvas可以书写内容但是只会在浏览器不显示canvas时才会显示书写的内容--><canvas></canvas><scriptsrc="js/javascript.js"></script></body></html>
js：
//以前封装的函数直接从工具库中复制过来的/***获取随机数的函数获取到的随机数取整*/functiongetRandom(a,b){returnMath.floor(Math.random()*Math.abs(a-b))+Math.min(a,b)}/***获取16进制的随机颜色值*/functiongetColor(){varcolor='#'for(vari=0;i<3;i++){varhex=getRandom(0,256).toString(16)color+=hex.length===1?'0'+hex:hex;}returncolor}//获取随机数但是不取整functionrandomDoubleFromRange(a,b){returnMath.random()*(Math.abs(a-b))+Math.min(a,b);}//设置鼠标的位置先设置为window的中心varmouse={x:window.innerWidth/2,y:window.innerHeight/2}//创建鼠标移动的事件监听事件监听鼠标所在window中的实时位置window.addEventListener('mousemove',function(window){//给数组中的x和y修改值mouse.x=window.clientX;mouse.y=window.clientY;});//当窗口大小发生改变时重新获取画布宽高并且重置代码resize事件在窗口大小变化时触发window.addEventListener('resize',function(){//window的可用窗口大小包含了滚动条的区域大小canvas.width=window.innerWidth;canvas.height=window.innerHeight;init();});//获取页面上的canvasvarcanvas=document.querySelector('canvas');//设置canvas的大小为window大小如果不设置就使用默认宽高300*150canvas.width=window.innerWidth;canvas.height=window.innerHeight;//设置canvas绘画的环境语法Canvas.getContext(contextID)现在版本只能写参数2d以后可能会支持3dvarctx=canvas.getContext('2d');//封装一个制造环绕鼠标的小球的函数参数是小球圆心在x轴的位置在y轴的位置小球半径小球填充颜色functionParticle(x,y,radius,color){//小球中心点的x轴位置this.x=x;//小球中心点的y轴位置this.y=y;//小球半径this.radius=radius;//小球颜色this.color=color;//小球转动的弧度值不取整如果取整就少了很多数字很多小球都会重叠this.theta=randomDoubleFromRange(0,2*Math.PI);//小球绕中心点转动的速度this.speed=0.05;//小球距离中心点的距离this.distance=getRandom(70,90);//小球跟随鼠标移动的速度this.dragSpeed=0.05;//记录鼠标移动前鼠标的位置this.lastMouse={x:x,y:y};//绘制函数this.draw=function(lastPosition){//重置当前路径因为创建的每一个路径都会以上一个beginPath之后的所有路径作为基础绘制会把之前所有线条的颜色全部绘制成和最后一个线条相同的一个颜色ctx.beginPath();//将小球颜色作为填充颜色ctx.strokeStyle=this.color;//将小球半径作为路径宽度ctx.lineWidth=this.radius;//路径起始位置ctx.moveTo(lastPosition.x,lastPosition.y);//路径结束位置ctx.lineTo(this.x,this.y);//绘制确切路径ctx.stroke();//关闭路径不是结束路径而是从结束点创建一条线连接到起始点使路径闭合ctx.closePath();}//更新数据的函数this.update=function(){//创建lastPosition对象接收上一次鼠标的x和y的值varlastPosition={x:this.x,y:this.y}//每次调用函数移动鼠标当前位置和上一次位置之间的dragSpeed=0.05的距离产生拖拽感觉this.lastMouse.x+=(mouse.x-this.lastMouse.x)*this.dragSpeed;this.lastMouse.y+=(mouse.y-this.lastMouse.y)*this.dragSpeed;//更新小球当前位置因为每一次调用小球的旋转角度不同导致其位置不同this.x=this.lastMouse.x+Math.cos(this.theta)*this.distance;this.y=this.lastMouse.y+Math.sin(this.theta)*this.distance;//更新小球的角度值this.theta+=this.speed;//将参数传递给绘制函数绘制路径this.draw(lastPosition);}}//定义particles变量varparticles;//初始化函数functioninit(){//每次调用这个函数都要先把数组内容清空因为使用这个函数除了打开网页后第一次代表调用之外别的调用都表示窗口大小发生了改变参数发生了变化为了修改窗口大小之后又因为调用该函数导致小球重复创建所以要调用后先清空再创建particles=[];//绘制50个小球for(vari=0;i<50;i++){//获取随机的颜色letcolor=getColor()//将构造函数创造的小球添加到数组中particles.push(newParticle(canvas.width/2,canvas.height/2,3,color));}}functionanimate(){//定时的调用这个函数类似于setInterval但是setInterval时间间隔不是很准确requestAnimationFrame固定为以每秒60次的频率调用一次括号内的函数requestAnimationFrame(animate);//每一帧都给之前的帧蒙上一层白色透明的矩形用以清除上一帧绘制的路径//填充矩形颜色矩形背景颜色透明度设置为0.1可以使之前几帧的路径因为多次覆盖慢慢边淡只是会在背景上留下很淡的痕迹如果直接使用rgb白色覆盖虽然没有痕迹残留但是之前路径直接被白色覆盖没有拖尾效果//ctx.fillStyle='rgb(255,255,255)';ctx.fillStyle='rgba(255,255,255,0.1)';//绘制矩形给window绘制一个等高等宽的矩形以此制造一个渐变的效果ctx.fillRect(0,0,canvas.width,canvas.height);//对键名遍历数组获取canvas.width/2,canvas.height/2,3,color参数每遍历一次就调用一次update函数将获取到的参数作为实参传递给update函数for(varpofparticles){p.update();}}//初始化创建小球init();//开始动画animate();
看完上述内容，你们对JavaScript如何实现环绕鼠标旋转效果有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注恰卡编程网行业资讯频道，感谢大家的支持。
