原生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下组织javascript代码(js函数化)
Aug 25 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
JavaScript网页定位详解
Jan 13 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
node.js缺少mysql模块运行报错的解决方法
Nov 13 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
mock.js模拟数据实现前后端分离
Jul 24 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 Javascript
Vue+Element-U实现分页显示效果
Nov 15 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
记录几个javascript有关的小细节
2007/04/02 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
js的逻辑运算符 ||
2010/05/31 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
2014/10/31 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
three.js实现3D视野缩放效果
2017/11/16 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
python list转矩阵的实例讲解
2018/08/04 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
Django中ORM的基本使用教程
2020/12/22 Python
职业生涯规划书的格式
2013/12/29 职场文书
求职自荐信怎么写
2014/03/06 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
施工质量承诺书范文
2014/05/30 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL
使用python绘制分组对比柱状图
2022/04/21 Python