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 相关文章推荐
JavaScript网页制作特殊效果用随机数
May 22 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
jQuery 监控键盘一段时间没输入
Apr 22 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
JavaScript 用fetch 实现异步下载文件功能
Jul 21 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
vue视频播放暂停代码
Nov 08 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 Javascript
jQuery实现计算器功能
Oct 19 jQuery
Axios取消重复请求的方法实例详解
Jun 15 Javascript
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 文件上传代码(限制jpg文件)
2010/01/05 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
javascript中对对层的控制
2006/12/29 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
javascript每日必学之继承
2016/02/23 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
Vue 中的compile操作方法
2018/02/26 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
大学生活学习的自我评价
2013/12/03 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
邀请函模板
2015/02/02 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
同事打架检讨书
2015/05/06 职场文书
小学生家长意见
2015/06/03 职场文书