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

 更新时间:2019年08月26日 09:19:33   作者:太阳玄烨   我要评论
这篇文章主要为大家详细介绍了JavaScript实现鼠标移动粒子跟随效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

※ 如上图是最终显示效果,跟随鼠标的移动,生成的粒子跟随。

需要用到的js库:UnderscoreUnderscore是一个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/ 中去查看具体的解释。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • spring boot前后端传参的实现

    spring boot前后端传参的实现

    这篇文章主要介绍了spring boot前后端传参的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • Android token过期刷新处理的方法示例

    Android token过期刷新处理的方法示例

    这篇文章主要介绍了Android token过期刷新处理的方法示例,本文详细的介绍了2种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • 简单讲解Java的Future编程模式

    简单讲解Java的Future编程模式

    这篇文章主要介绍了Java的Future编程模式,包括对异步和并发的一些设计思维,需要的朋友可以参考下
    2015-11-11
  • 详解Springboot+React项目跨域访问问题

    详解Springboot+React项目跨域访问问题

    这篇文章主要介绍了详解Springboot+React项目跨域访问问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • Java实现显示指定类型的文件

    Java实现显示指定类型的文件

    这篇文章主要介绍了Java实现显示指定类型的文件,需要的朋友可以参考下
    2014-03-03
  • Java编程实现springMVC简单登录实例

    Java编程实现springMVC简单登录实例

    这篇文章主要介绍了Java编程实现springMVC简单登录实例,具有一定参考价值,需要的朋友可以了解下。
    2017-11-11
  • 介绍Jersey-Jersey入门基础

    介绍Jersey-Jersey入门基础

    REST不是一种新的技术,而仅仅是一个理论,实践这样的理论可以让我们的应用更加先进。
    2013-02-02
  • springboot+vue部署按照及运行方法

    springboot+vue部署按照及运行方法

    在本篇文章里小编给大家整理了关于springboot+vue部署按照及运行方法和实例内容,需要的朋友们学习参考下。
    2020-01-01
  • java 根据经纬度获取地址实现代码

    java 根据经纬度获取地址实现代码

    这篇文章主要介绍了 java 根据经纬度获取地址实现代码的相关资料,需要的朋友可以参考下
    2017-05-05
  • 深入学习springboot线程池的使用和扩展

    深入学习springboot线程池的使用和扩展

    这篇文章主要介绍了深入学习springboot线程池的使用和扩展,springboot框架提供了@Async注解,帮助我们更方便的将业务逻辑提交到线程池中异步执行,需要的朋友可以参考下
    2019-06-06

最新评论