JavaScript实现鼠标移动粒子跟随效果
更新时间：2020年09月13日 14:08:11 作者：太阳玄烨
这篇文章主要为大家详细介绍了JavaScript实现鼠标移动粒子跟随效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现鼠标移动粒子跟随效果的具体代码，供大家参考，具体内容如下
※ 如上图是最终显示效果，跟随鼠标的移动，生成的粒子跟随。
需要用到的js库：Underscore。Underscore是一个JavaScript实用库，提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。它是这个问题的答案：“如果我在一个空白的HTML页面前坐下，并希望立即开始工作，我需要什么？”...它弥补了部分jQuery没有实现的功能，同时又是Backbone.js必不可少的部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标粒子demo</title>
<style>
canvas { background: #333; }
</style>
</head>
<body>
<canvas width="800" height="500">您的浏览器不支持此标签！</canvas>
<script src="js/underscore.min.js"></script>
<script>
// 获取canvas元素
var cvs = document.querySelector("canvas");
// 获取上下文对象
var ctx = cvs.getContext("2d");
// 声明一个空数组，用来放后面生成的小球
var ballsArr = [];
// 创建一个小球类
function Balls (x, y){
// 坐标x为传进来的x
this.x = x;
// 坐标y为传进来的y
this.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);
// 把生成的小球存入数组ballsArr
ballsArr.push(this);
}
// 给所有Balls绑定一个方法update，目的是为了每次都能按照随机方向移动
Balls.prototype.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){
_.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>
里面用到的underscore中的几个方法，可以到 doc/underscore/ 中去查看具体的解释。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
JavaWeb项目中springmvc和tomcat对静态文件的处理
这篇文章主要介绍了JavaWeb项目中springmvc和tomcat对静态文件的处理 的相关资料,需要的朋友可以参考下2016-07-07
详解Maven settings.xml配置(指定本地仓库、阿里云镜像设置)
这篇文章主要介绍了详解Maven settings.xml配置(指定本地仓库、阿里云镜像设置)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
利用SpringMVC接收复杂对象和多个文件(前端使用JQuery)
这篇文章主要介绍了利用SpringMVC接收复杂对象和多个文件(前端使用JQuery)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了IDEA 中使用 Hudi的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要介绍了Java面向对象之内部类案例讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-08-08
这篇文章主要为大家详细介绍了支付宝APP支付（IOS手机端+java后台）版，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
这篇文章主要介绍了Java中如何计算一段程序的运行时间问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
工作中需要对一个原本加载属性文件的工具类修改成对数据库的操作当然，ado层已经写好，但是需要从Spring中获取bean,然而，工具类并没有交给Spring来管理，所以需要通过方法获取所需要的bean。于是整理了Spring获取bean的几种方法2023-03-03
这篇文章主要介绍了Java中RocketMq的消费方式详解,RocketMQ的消费方式都是基于拉模式拉取消息的,而在这其中有一种长轮询机制(对普通轮询的一种优化),来平衡上面Push/Pull模型的各自缺点,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了TimSort归并排序的优化及Java实现,TimSort 是一个归并排序做了大量优化的版本,需要的朋友可以参考下2016-05-05
最新评论