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 相关文章推荐
JS代码放在head和body中的区别分析
Dec 01 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
Mar 05 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
Dec 12 Javascript
浅析angularJS中的ui-router和ng-grid模块
May 20 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
vue组件化中slot的基本使用方法
May 01 Javascript
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
详细介绍解决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 email邮箱正则
2008/10/08 PHP
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
python中的闭包函数
2018/02/09 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
python模拟实现分发扑克牌
2020/04/22 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
为什么相对PHP黑python的更少
2020/06/21 Python
离职保密承诺书
2014/05/28 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
技术股份合作协议书
2014/10/05 职场文书
停车场管理协议书范本
2014/10/08 职场文书
收款委托书
2014/10/14 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
爱心募捐感谢信
2015/01/22 职场文书
标准发言稿结尾
2019/07/18 职场文书
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS