JS实现好看的鼠标跟随彩色气泡效果（附代码）

码农天地 - 2020-06-19 20:59:00

下面本篇文章给大家介绍一下JS实现好看的鼠标跟随彩色气泡效果，文中示例代码介绍的非常详细。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

具体代码：

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title> <style> *{ margin:0;padding:0; } body{overflow:hidden;} #canvas{ background-color:black; /*width:100%; height:100vh;*/ } </style> </head><body> <canvas id="canvas" ></canvas> </body> <script>var canvas = document.querySelector('#canvas');var ctx = canvas.getContext("2d");var starlist = [];function init(){ canvas.width = window.innerWidth; canvas.height = window.innerHeight;}init();window.onresize = init; canvas.addEventListener('mousemove',function(e){ starlist.push(new Star(e.offsetX,e.offsetY)); console.log(starlist)}) 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; console.log(this.color); this.draw();}Star.prototype={ draw:function(){ ctx.beginPath(); ctx.fillStyle = this.color; ctx.globalCompositeOperation='lighter' ctx.globalAlpha= this.a; ctx.arc(this.x,this.y,30,0,Math.PI*2,false); ctx.fill(); this.updata(); }, updata(){ this.x+=this.vx; this.y+=this.vy; this.a*=0.98; }}console.log(new Star(150,200));function render(){ ctx.clearRect(0,0,canvas.width,canvas.height) starlist.forEach((item,i)=>{ item.draw(); if(item.a<0.05){ starlist.splice(i,1); } }) requestAnimationFrame(render);}render(); </script><div style="text-align:center;"></div> </html>

更多jQuery、Javascript特效，推荐访问：js特效大全！

以上就是JS实现好看的鼠标跟随彩色气泡效果（附代码）的详细内容，更多请关注php中文网其它相关文章！

微信分享相关标签：JS本文转载于：脚本之家，如有侵犯，请联系a@php.cn删除上一篇：为了性能选择for循环遍历吗？下一篇：JavaScript如何实现“全选”和"全不选"功能？（代码示例）

相关视频

浅谈写出优雅耐看 JS代码的方法分享5种JS字符串转数字的方法详解使用Minify压缩css和js文件了解JS滚轮事件(mousewheel/DOMMo...JS实现好看的鼠标跟随彩色气泡效果（附代码）JavaScript赋值运算符JavaScript逻辑运算符JavaScript函数的调用（1）

网友评论

文明上网理性发言，请遵守新闻评论服务协议

我要评论立即提交专题推荐独孤九贱-php全栈开发教程

全栈 100W+

主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

玉女心经-web前端开发教程

入门 50W+

主讲：灭绝师太由浅入深、明快简洁，非常适合前端学习入门

天龙八部-实战开发教程

实战 80W+

主讲：西门大官人思路清晰、严谨规范，适合有一定web编程基础学习

作者信息

青灯夜游

今天学习一小步，明天提升一大步

最近文章分享 10 个提高 JavaScript 技能的测验问答19515个你可能还不了解的 Git 命令976分享一些值得前端开发者收藏的 GitHub 库429发布技术文章最新文章热门排行

JS 如何获取扫码枪输入数据一起看看JavaScript如何获取页面上被选中的文字现代JavaScript使用技巧之ES6中的简写语法用JavaScript获取伪元素(Pseudo-Element)属性的方法详解如何用JavaScript避免代码的重复执行如何用js统计字符串中每个字符出现的次数？JavaScript判断"字典"为空的方法8个问题测试你的JavaScript基础

RN布局的实例详解jQ选择器汇总JS是什么意思json格式是什么？json格式文件怎么打开？vue.js中created方法的使用详解echarts柱状图颜色设置：echarts柱状图如何设置不同颜色？（代码）js数组如何删除指定位置的元素？删除指定位置元素的2种方法怎样实现Vue项目中使用Vux推荐视频教程JavaScript设计模式完整视频教程JavaScript核心编程视频教程JavaScript OOP调试技巧视频教程JavaScript极速入门_玉女心经系列视频教程分类php视频教程html视频教程css视频教程JS视频教程jQuery视频教程mysql视频教程Linux视频教程Python视频教程article_status = 287557;网站首页 PHP视频PHP实战PHP代码PHP手册词条手记编程词典

php中文网：公益在线php培训，帮助PHP学习者快速成长！合肥彼岸互联信息技术有限公司

座机号码：0551-64933227 安徽省合肥市政务新区置地广场D座2101

特别申明：本文内容来源网络，版权归原作者所有，如有侵权请立即与我们联系（cy198701067573@163.com），我们将及时处理。

上一篇：为了性能选择for循环遍历吗？

下一篇：如何用JavaScript避免代码的重复执行

Tags 标签

加个好友，技术交流

码农天地

首页 HTML/CSS WEB服务器 PHP Linux 数据库异常报错插件工具美文欣赏站长直荐