原生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 相关文章推荐
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
探讨javascript是不是面向对象的语言
Nov 21 Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
May 20 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 Javascript
vue实现拖拽进度条
Mar 01 Vue.js
原生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 $_FILES函数详解
2011/03/09 PHP
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
js 操作符实例代码
2009/10/24 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
JavaScript实现多层颜色选项卡嵌套
2020/09/21 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
javascript实现倒计时提示框
2021/03/02 Javascript
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
python将字符串转换成数组的方法
2015/04/29 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
python_mask_array的用法
2020/02/18 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
四年大学自我鉴定
2014/02/17 职场文书
租房协议书样本
2014/08/20 职场文书
公司慰问信范文
2015/03/23 职场文书
搞笑结婚保证书
2015/05/08 职场文书
预备党员入党感言
2015/08/01 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL