JavaScript canvas实现跟随鼠标事件


Posted in Javascript onFebruary 10, 2020

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

//鼠标移动 展现光片

JavaScript canvas实现跟随鼠标事件

<!DOCTYPE html>
<html>

<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 body {
 margin: 0;
 overflow: hidden;
 }

 #canvas {
 background: #000;
 }
 </style>
</head>

<body>
 <canvas id="canvas"></canvas>
 <script>
 var canvas = document.getElementById('canvas');
 var context = canvas.getContext('2d');
 var circleList = [];

 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;

 canvas.addEventListener('mousemove', function (e) {
 // 将对象push到数组中,画出来的彩色小点可以看作每一个对象中记录着信息 然后存在数组中
 circleList.push(new Circle(e.clientX, e.clientY));
 })

 //取x到y之间随机数:Math.round(Math.random()*(y-x)+x) 包括y
 function random(min, max) {
 return Math.round(Math.random() * (max - min) + min);
 }

 function Circle(x, y) {
 this.x = x;
 this.y = y;

 this.vx = (Math.random() - 0.5) * 3; //随机出来一个正数,或者负数。乘3是为了让速度变得大一点
 this.vy = (Math.random() - 0.5) * 3;

 this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) + ')';

 this.a = 1; // 初始透明度

 this.draw();
 }
 Circle.prototype = {
 draw() {
 context.beginPath();
 context.fillStyle = this.color;
 context.globalCompositeOperation = 'lighter';
 context.globalAlpha = this.a; //全局透明度
 context.arc(this.x, this.y, 30, 0, Math.PI * 2, false);
 context.fill();
 this.update();
 },
 update() {
 // 根据速度更新每一个小圆的位置
 this.x += this.vx;
 this.y += this.vy;
 this.a *= 0.98;
 }
 }

 function render() {
 //把原来的内容区域清除掉
 context.clearRect(0, 0, canvas.width, canvas.height);
 circleList.forEach(function (ele, i) {
 ele.draw();

 if (ele.a < 0.05) {
  circleList.splice(i, 1);
 }
 });

 requestAnimationFrame(render); //动画,会根据浏览器的刷新频率更新动画
 }
 render();
 </script>
</body>

</html>

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

Javascript 相关文章推荐
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
js 操作select和option常用代码整理
Dec 13 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
基于jquery实现左右按钮点击的图片切换效果
Jan 27 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 Javascript
详解服务端预渲染之Nuxt(介绍篇)
Apr 07 Javascript
详解jquery和vue对比
Apr 16 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 #Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 #Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 #Javascript
js实现登录拖拽窗口
Feb 10 #Javascript
javascript 原型与原型链的理解及应用实例分析
Feb 10 #Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 #Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 #Javascript
You might like
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
使用TensorFlow对图像进行随机旋转的实现示例
2020/01/20 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
Python如何给函数库增加日志功能
2020/08/04 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
美的官方商城:Midea
2016/09/14 全球购物
中专毕业生自荐信范文
2013/11/28 职场文书
客房主管岗位职责
2013/12/09 职场文书
预备党员党课思想汇报
2014/01/13 职场文书
关于雷锋的演讲稿
2014/05/10 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
初级党校心得体会
2014/09/11 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
python如何做代码性能分析
2021/04/26 Python
利用python调用摄像头的实例分析
2021/06/07 Python
mysql中between的边界,范围说明
2021/06/08 MySQL