JavaScript实现好看的跟随彩色气泡效果


Posted in Javascript onFebruary 06, 2020

本文实例为大家分享了js实现跟随彩色气泡的具体代码,供大家参考,具体内容如下

JavaScript实现好看的跟随彩色气泡效果

代码:

<!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>

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

Javascript 相关文章推荐
限制复选框的最大可选数
Jul 01 Javascript
监控 url fragment变化的js代码
Apr 19 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
Apr 14 Javascript
javascript获得当前的信息的一些常用命令
Feb 25 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
vue 动态绑定背景图片的方法
Aug 10 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 #Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 #Javascript
js get和post请求实现代码解析
Feb 06 #Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 #Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 #Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 #Javascript
node.js开发辅助工具nodemon安装与配置详解
Feb 06 #Javascript
You might like
php 中文处理函数集合
2008/08/27 PHP
php列出一个目录下的所有文件的代码
2012/10/09 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
ajax+php控制所有后台函数调用
2015/07/15 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
python 控制语句
2011/11/03 Python
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
django框架中间件原理与用法详解
2019/12/10 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
英智兴达软件测试笔试题
2016/10/12 面试题
贯彻学习两会心得体会范文
2014/03/17 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
网络管理员岗位职责
2015/02/12 职场文书
餐厅开业活动方案
2019/07/08 职场文书
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python
MySQL连接控制插件介绍
2021/09/25 MySQL
工厂无线对讲系统解决方案
2022/02/18 无线电
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技