JavaScript实现鼠标移动粒子跟随效果

本文的例子分享了JavaScript实现鼠标移动粒子跟随效果的具体代码，供大家参考。具体内容如下

上图显示了最终的显示效果，随着鼠标的移动，生成的粒子也跟着移动。

需要Js库：下划线。下划线是一个JavaScript实用程序库，它提供了一整套实用的函数式编程功能，但没有扩展任何JavaScript内置对象。就是这个问题的答案：“如果我坐在一个空白的HTML页面前，想马上开始工作，我需要什么？”.它弥补了jQuery没有实现的一些功能，也是Backbone.js必不可少的一部分

！doctype html lang=' en ' head meta charset=' utf-8 ' title鼠标粒子演示/title样式画布{背景： # 333；}/style/head body画布宽度=' 800 '高度=' 500 '您的浏览器不支持此标签！/canvas script src=' http : js/underline . min . js '/script script//get canvas元素varcvs=document . queryselector(' canvas ')；//获取上下文对象var CTX=CVS . getcontext(' 2d ')；//声明一个空数组来放置后面生成的球。var BallSarr=[]；//创建一个小球函数Balls (x，y){ //坐标x是传入的x this.x=x//坐标y是传入的y this.y=y//生成球的半径为5到10的任意整数(参数可选)。this.r=_。随机(5，10)；//生成的球的颜色是随机的七种颜色之一(参数是随机的)。这个。c=_。样品(['红色'，'橙色'，'黄色'，'绿色'，'青色'，'蓝色'，'白色'])；//球的坐标x的增量是-4到4之间的整数(参数可选)。this.dx=_。随机(-4，4)；//球的坐标y的增量为-4到4之间的整数(参数可选)。this.dy=_。随机(-4，4)；//将生成的球存储在ballsArr数组ballsar . push(this)；}//用方法更新绑定所有球，以便移动球。原型。每次随机方向的update=function(){//x坐标加增量dx this . x=this . dx；//y坐标加增量dy this.y=this.dy每次；//每次半径减小0.5(参数随机)。this . r-=0.5；//如果半径小于或等于0，则移除if (this。r=0) {_。没有(ballsarr，这个)来自球阵；} }//绑定一个方法渲染到所有的Balls，目的是画一个圆。balls . prototype . render=function(){//如果半径小于等于0，则无需绘制If(this . r=0){ return；}//开始绘制CTX . BeginPath()；//画一个圆，(中心坐标x，中心坐标y，起始弧度，结束弧度，【顺时针】)ctx.arc (this.x，this.y，this.r，0，2 * math . pi)；//颜色是数组中的随机CTX . fillstyle=this . c；//绘制画布CTX . fill()；//停止绘制CTX . closepath()；} //onmousemove事件监控cvs.onmousemove=function (){ //在当前鼠标位置生成两个球，然后只要鼠标移动，一次就会生成两个新球(事件。offsetx，事件。偏移)；新球(event.offsetX，event . offsety)；} //setInterval模拟25FPS的帧率setInterval(函数(){ //由于画布在屏幕上是像素化的，先清除CTX.clearrect (0，0，cvs.width，CVS . height)；//_.每个方法运行以下方法_。每个(ballsarr，function (value) {value。update())用于每个前面的元素；value . render()；});}, 40);/script/body/html中使用的下划线的几种方法可以在doc/下划线/中解释。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。