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 29 Javascript
很多人都是用下面的js刷新站IP和PV
Sep 05 Javascript
为调试JavaScript添加输出窗口的代码
Feb 07 Javascript
js动态加载以及确定加载完成的代码
Jul 31 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 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.ini 中文版
2006/10/28 PHP
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
PHP与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
ASP SQL防注入的方法
2008/12/25 Javascript
jQuery timers计时器简单应用说明
2010/10/28 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
python文件的md5加密方法
2016/04/06 Python
TensorFlow实现模型评估
2018/09/07 Python
实例讲解python中的协程
2018/10/08 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
python代码能做成软件吗
2020/07/24 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
园长自我鉴定
2013/10/06 职场文书
小学生美德少年事迹
2014/02/02 职场文书
《中彩那天》教学反思
2014/02/22 职场文书
博士毕业生自我鉴定范文
2014/04/13 职场文书
中秋节慰问信
2015/02/15 职场文书
复活读书笔记
2015/06/29 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
基于Redission的分布式锁实战
2022/08/14 Redis