原生js canvas实现鼠标跟随效果


Posted in Javascript onAugust 02, 2020

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

效果展示:

原生js canvas实现鼠标跟随效果

源码展示:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>canvas鼠标跟随效果(原生js实现)</title>
  <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
  <style>
    * {
      margin:0;
      padding:0;
    }
    body {
      overflow:hidden;
    }
    #myCanvas {
      background-color:#000;
    }
  </style>
</head>
<body>
<canvas id="myCanvas"></canvas>
 
<script>
  var myCanvas = document.getElementById('myCanvas');
  var ctx = myCanvas.getContext("2d");
  var starlist = [];
 
  function init() {
    // 设置canvas区域的范围为整个页面
    myCanvas.width = window.innerWidth;
    myCanvas.height = window.innerHeight;
  };
  init();
  // 监听屏幕大小改变 重新为canvas大小赋值
  window.onresize = init;
 
  // 当鼠标移动时 将鼠标坐标传入构造函数 同时创建一个对象
  myCanvas.addEventListener('mousemove', function(e) {
    // 将对象push到数组中,画出来的彩色小点可以看作每一个对象中记录着信息 然后存在数组中
    starlist.push(new Star(e.offsetX, e.offsetY));
  });
 
  // 随机数函数
  function random(min, max) {
    // 设置生成随机数公式
    return Math.floor((max - min) * Math.random() + min);
  };
 
 
  // 构造函数
  function Star(x, y) {
    // 将坐标存在每一个点的对象中
    this.x = x;
    this.y = y;
    // 设置随机偏移量
    this.vx = (Math.random() - 0.5) * 3;
    this.vy = (Math.random() - 0.5) * 3;
    this.color = 'rgb(' + random(0, 256) + ',' + random(0, 256) + ',' + random(0, 256) + ')';
    // 初始透明度
    this.a = 1;
    // 开始画
    this.draw();
  }
 
  // 再star对象原型上封装方法
  Star.prototype = {
    // canvas根据数组中存在的每一个对象的小点信息开始画
    draw: function() {
      ctx.beginPath();
      ctx.fillStyle = this.color;
      // 图像覆盖 显示方式 lighter 会将覆盖部分的颜色重叠显示出来
      ctx.globalCompositeOperation = 'lighter'
      ctx.globalAlpha = this.a;
      ctx.arc(this.x, this.y, 30, 0, Math.PI * 2, false);
      ctx.fill();
      this.updata();
    },
    updata: function() {
      // 根据偏移量更新每一个小点的位置
      this.x += this.vx;
      this.y += this.vy;
      // 透明度越来越小
      this.a *= 0.98;
    }
  }
  // 渲染
  function render() {
    // 每一次根据改变后数组中的元素进行画圆圈 把原来的内容区域清除掉
    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height)
 
    // 根据存在数组中的每一位对象中的信息画圆
    starlist.forEach(function(ele, i) {
      ele.draw();
      // 如果数组中存在透明度小的对象 ,给他去掉 效果展示逐渐消失
      if (ele.a < 0.05) {
        starlist.splice(i, 1);
      }
    });
    requestAnimationFrame(render);
  }
  render();
</script>
<pre style="color:red">
 感: 最近贡献一下我在教学中的小案例可以能给你一些帮助 ,希望继续关注我的博客
                                        --王
</pre> 
 
</body>
</html>

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

Javascript 相关文章推荐
checkbox 复选框不能为空
Jul 11 Javascript
JQuery 动态扩展对象之另类视角
May 25 Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 Javascript
javascript中数组的常用算法深入分析
Mar 12 Javascript
vue实现简单的日历效果
Sep 24 Javascript
vue 弹出遮罩层样式实例
Jul 22 Javascript
原生js+canvas实现下雪效果
Aug 02 #Javascript
jQuery实现滑动开关效果
Aug 02 #jQuery
jQuery实现开关灯效果
Aug 02 #jQuery
JavaScript实现动态生成表格
Aug 02 #Javascript
javascript实现京东登录显示隐藏密码
Aug 02 #Javascript
Vue scoped及deep使用方法解析
Aug 01 #Javascript
Vue中computed及watch区别实例解析
Aug 01 #Javascript
You might like
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
再谈javascript 动态添加样式规则 W3C校检
2009/12/25 Javascript
js实现快速分享功能(你的文章分享工具)
2013/06/25 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
node实现基于token的身份验证
2018/04/09 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
微信小程序倒计时功能实例代码
2018/07/17 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
Python编程中的反模式实例分析
2014/12/08 Python
python获取外网ip地址的方法总结
2015/07/02 Python
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
Python简单基础小程序的实例代码
2019/04/28 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
Python内置函数property()如何使用
2020/09/01 Python
院药学专业个人求职信
2013/09/21 职场文书
结构工程研究生求职信
2013/10/13 职场文书
青年教师培训方案
2014/02/06 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
护士求职自荐信
2015/03/25 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang