html+js 实现鼠标粒子拖尾效果其中调用underscore和jQuery库

演示视频：

运用了underscore和jQuery库，将库导入项目文件并调用即可，
如下代码的：

<script src="underscore.min.js" type="text/javascript"></script>
<script src = jquery-1.9.1.min.js type="text/javascript"></script>

文章最后的网盘中有两个库，可前往下载
下面是源代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>鼠标粒子demo</title>
</head>
<body background="123.jpg"style="background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;"><!--这里插入了背景图-->
<script src="underscore.min.js" type="text/javascript"></script>
<script src = jquery-1.9.1.min.js type="text/javascript"></script>
<canvas id = "myCanvas" style="background: rgba(255,255,155,0); position: absolute; z-index: -1;" >您的浏览器不支持此标签！</canvas>
<!--设置画布透明度为0，即显示背景-->
<script>// 获取canvas元素var cvs = document.querySelector("canvas");// 获取上下文对象var ctx = cvs.getContext("2d");// 声明一个空数组，用来放后面生成的小球var ballsArr = [];$(function(){  //设置画布为全屏模式var canvas = $('#myCanvas');canvas.attr("width",$(window).get(0).innerWidth)canvas.attr("height",$(window).get(0).innerHeight)var context = canvas.get(0).getContext("2d");context.fillRect(0,0,canvas.width(),canvas.height());$(window).resize(function(){canvas.attr("width",$(window).get(0).innerWidth)canvas.attr("height",$(window).get(0).innerHeight)context.fillRect(0,0,canvas.width(),canvas.height());});});// 创建一个小球类function Balls (x, y){// 坐标x为传进来的xthis.x = x;// 坐标y为传进来的ythis.y = y;// 生成的小球半径为5到10中的任一整数（参数随便）this.r = _.random(5, 10);// 生成的小球的颜色为这七种颜色中的随机一种（参数随便）this.c = _.sample(["red", "orange", "yellow", "green", "cyan", "blue", "white"]);// 小球坐标x的增量为-4到4之间的整数（参数随便）this.dx = _.random(-4, 4);// 小球坐标y的增量为-4到4之间的整数（参数随便）this.dy = _.random(-4, 4);// 把生成的小球存入数组ballsArrballsArr.push(this);}// 给所有Balls绑定一个方法update，目的是为了每次都能按照随机方向移动Balls.prototype.update = function (){// 每次x坐标加上增量dxthis.x += this.dx;// 每次y坐标加上增量dythis.y += this.dy;// 每次半径缩小0.5（参数随便）this.r -= 0.5;// 半径小于等于0的话，就从小球数组中移出if(this.r <= 0){_.without(ballsArr, this);}}// 给所有Balls绑定一个方法render，目的是画圆。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 (){// 在当前鼠标的位置，生成俩球，然后只要鼠标移动就一直生成小球，每次两个new Balls(event.offsetX, event.offsetY);new Balls(event.offsetX, event.offsetY);}// setInterval 模拟25FPS的帧率setInterval(function (){// 因为canvas上屏即像素化，所以先清屏ctx.clearRect(0, 0, cvs.width, cvs.height);// _.each方法是针对每一个前面的元素，都运行后面的方法_.each(ballsArr, function (value){value.update();value.render();});}, 40);</script>
</body>
</html>

链接: https://pan.baidu.com/s/1Z3O1jkTGlsCvLQwPP1AEnw
密码: e1n7

html+js 实现鼠标粒子拖尾效果其中调用underscore和jQuery库相关推荐

js 实现鼠标移动拖尾效果
img需要添加绝对定位 img { position: absolute; } js代码: //声明一个变量计次 var count=0; //鼠标相对于文档移动时触发移动时间 document.on ...
html鼠标拖尾效果,JS实现鼠标移动拖尾
本文实例为大家分享了JS实现鼠标移动拖尾的具体代码,供大家参考,具体内容如下 JS 代码 function getMousePos(event) { var e = event || window.e ...
原生JS鼠标移动拖尾效果
JS 代码 function getMousePos(event) {var e = event || window.event;var mouseInfo = {mouseX : e.clientX ...
纯js实现鼠标拖尾效果（好玩又简单，一学就会）
js特效-鼠标滑动的拖尾效果 <script>//鼠标移动事件(document范围内移动)document.onmousemove=function(event){//1.创建divva ...
游戏中实现鼠标拖尾效果
游戏中使用Trail Renderer这个通过设置参数来实现拖尾效果,通过在update中吧鼠标的点击的路径给怪哉这个得物体. 转载于:https://www.cnblogs.com/qinshuai ...
html鼠标拖尾效果,javascript canvas拖尾效果
{$title} var lujinglist = []; //制作路径 for (var x = 10; x <= 300; x++) { var dian = [x, 50]; lujing ...
Unity初级案例-愤怒的小鸟:四:11解决重复划线和小鸟轮换速度突然变大的问题+12添加小鸟飞出的拖尾效果+13整合场景和解决无法显示划线弹弓的问题
目录一.目的 1.想知道:愤怒的小鸟:如何制作 2.做好学习笔记,方便下次查看二.参考 1.SIKI学院三.注意 1.版本操作:1:11解决重复划线和小鸟轮换速度突然变大的问题 1.GameM ...
AEJoy—— 七个拖尾效果表达式实例
创建拖尾效果鼠标拖尾有时需要有一系列的层跟随一个有时间延迟的 "leader" 层.你可能见过那些通过光标留下一个 "鼠标轨迹" 的网页--一串光标图像的副 ...
canvas拖尾效果
canvas实现粒子的拖尾效果 /*** @Author SuZhe* @DateTime 2019-03-15* @desc 兼容 requestAnimFrame* @return {[Funct ...

html+js 实现鼠标粒子拖尾效果其中调用underscore和jQuery库

html+js 实现鼠标粒子拖尾效果其中调用underscore和jQuery库相关推荐

最新文章

热门文章