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 相关文章推荐
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 Javascript
详谈innerHTML innerText的使用和区别
Aug 18 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 Javascript
vue绑定class的三种方法
Dec 24 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
前端JS获取URL参数的4种方法总结
Apr 05 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 生成饼图 三维饼图
2009/09/28 PHP
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
vue2里面ref的具体使用方法
2017/10/27 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
Python程序语言快速上手教程
2012/07/18 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
python读取文本中数据并转化为DataFrame的实例
2018/04/10 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
python实现批量注册网站用户的示例
2019/02/22 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
python实现简单俄罗斯方块
2020/03/13 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
SQL面试题
2013/12/09 面试题
电气工程自动化求职信
2014/03/14 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
python模块与C和C++动态库相互调用实现过程示例
2021/11/02 Python
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫