canvas梦幻泡泡源码分享

效果图如下

canvas梦幻泡泡源码分享

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
</head>
<style>
body{
margin:0;
}
canvas{
display:block;

background-color:#222;
}
</style>
<body>
<canvas></canvas>
</body>
</html>
<script>

// var y = 100;
// var canvas = document.querySelector('canvas');
// var ctx = canvas.getContext('2d');
// ctx.fillStyle = 'red';
// // 方法一定时器（非常消耗性能）
// //定时器刷新频率为 1/60秒代表60帧刷新

// setInterval(function(){

// ctx.clearRect(0, 0, 1200, 800)

// // 清空路径位置
// ctx.beginPath();
// //.arc(x坐标，y坐标,半径，其实坐标，旋转角度 true 顺时针 false 逆时针)
// ctx.arc(100,y,30,0,Math.PI*2,false);
// y++
// ctx.fill();
// }, 1000/60);

//利用 requestAnimationFrame() 根据浏览器刷新率刷新
// var canvas = document.querySelector('canvas');
// var ctx = canvas.getContext('2d');
// ctx.fillStyle = 'red';
// x = 10;
// function main(){
// ctx.clearRect(0, 0, 1200, 800)
// ctx.beginPath();
// ctx.arc(x,50,30,0,Math.PI*2,false);
// x++
// ctx.fill();

// requestAnimationFrame(main)
// }

// //
// main()
Particle = {
Ball_config : function(x=10,y=10){// 构造小球的函数
this.config = {};
this.config.x = x;//坐标x
this.config.y = y;//坐标y
this.config.r = 20;//半径大小
this.config.vx = random(-10,10);//坐标随机偏移x 的大小
this.config.vy = random(-10,10);//坐标随机偏移y 的大小
this.config.vr = random(-2,0);//随机缩小半径大小
this.config.a = 1;//初始值透明度
this.config.va = 0.95;//以0.95倍的速度透图案
this.colorList = ['#cc00ff','#ff0','#4caf50','#f60','#00f','#8bc34a','#e91e63'];//小球颜色的列表
this.config.color = this.colorList[Math.floor(random(0,7))];//随机挑选一个颜色选中
return this.config;
},
update: function(item){// 更新小球的状态
item.x += item.vx; //小球位置递增
item.y += item.vy; //小球位置递增
item.r += item.vr; //小球半径递减
item.a *= item.va; //小球透明递减
if(item.r < 0){
// 如果半径小于0 则等于0
item.r = 0;
}
},
draw:function(){//绘制小球
Ball.ctx.clearRect(0, 0, Ball.canvas.width, Ball.canvas.height);
//求对应的列表当中的每一球为 item
Ball.arrList.forEach((item) =>{
//清空历史路径
Ball.ctx.beginPath();
//颜色叠加在一起变成白色
Ball.ctx.globalCompositeOperation = 'lightter'
//设置透明度
Ball.ctx.globalAlpha = item.a;
//绘制小球
Ball.ctx.arc(item.x,item.y,item.r,0,Math.PI*2,false);
//添加样式颜色
Ball.ctx.fillStyle = item.color;
Ball.ctx.fill();
Particle.update(item)
})

//如果小球的长度超过200 删除最前面的第一个
if(Ball.arrList.length > 1) {
Ball.arrList.shift()
}
requestAnimationFrame(Particle.draw);//定时递归，每个浏览器刷新频率调用
}
}

Ball = {
arrList : [],
init:function(canvas){
this.canvas = canvas;
this.init_canvas_wh();
this.ctx = canvas.getContext('2d');//获取绘制环境
Ball.create(100,100);
this.mousemove_event();
Particle.draw();
},
init_canvas_wh : function(){
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight;
},
create : function (x = 100,y = 100){//添加小球到数组中
Ball.arrList.push(new Particle.Ball_config(x,y))
},
mousemove_event(){//移动事件绑定
this.canvas.addEventListener('mousemove',function(e) {
// console.log(e.clientX,e.clientY)
Ball.create(e.clientX,e.clientY);
})
}
}

/*
自定义随机函数
@param int min 最小值
@param int max 最大值
@return int 指定大小的一个随机数
*/
function random(min,max){
//Math.random() 返回0-1 中间的一个随机数
return (max-min)*Math.random()+min;
}

// 1.获取canvas dom元素
var canvas = document.querySelector('canvas');

Ball.init(canvas) // 初始化

// 监听浏览器宽度发生变化时调用函数
// 动态调整高度和宽度

window.onresize = function(){
Ball.init_canvas_wh();
}

</script>

canvas梦幻泡泡源码分享

相关推荐