原生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 相关文章推荐
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
vue模板语法-插值详解
Mar 06 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
JS实现的简单折叠展开动画效果示例
Apr 28 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
vue-cli设置css不生效的解决方法
Feb 07 Javascript
js实现登录拖拽窗口
Feb 10 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 Javascript
基于javascript实现放大镜特效
Dec 03 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
php ss7.5的数据调用 (笔记)
2010/03/08 PHP
PHP去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
js实现文字滚动效果
2016/03/03 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
python处理json数据中的中文
2014/03/06 Python
Python实例一个类背后发生了什么
2016/02/09 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
Python 闭包的使用方法
2017/09/07 Python
python解决pandas处理缺失值为空字符串的问题
2018/04/08 Python
python实现对输入的密文加密
2019/03/20 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
学校经典推荐信
2013/10/30 职场文书
会计电算化专业毕业生推荐信
2013/12/24 职场文书
大学活动策划书范文
2014/01/10 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python