demo
原理
HTML结构
<body>
<canvas id="canvas" width="1300" height="750"></canvas>
</body>
JS定义canvas绘制行为
<script>
(()=>{
document.addEventListener('DOMContentLoaded',function(){
//业务
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');
let circles = [];
setInterval(function () {
genareteCircle();
},100);
setInterval(function () {
circleRun2();
},16);
//生成圆
function genareteCircle() {
let circle = {};
circle.x = 400+Math.floor(Math.random()*(canvas.width-800));
circle.y = Math.floor(Math.random()*(canvas.height -300));
circle.r = Math.ceil(Math.random()* 20);
circle.deltaAngle = 0;
circle.deltay = 0;
circle.color = {};
circle.color.r = Math.floor(Math.random()*256);
circle.color.g = Math.floor(Math.random()*256);
circle.color.b = Math.floor(Math.random()*256);
circle.color.a = 1;
circles.push(circle);
}
/**
* 使气泡围绕圆形运动
*/
function circleRun2() {
ctx.clearRect(0,0,canvas.width,canvas.height);
//中心
let runr = {
x:canvas.width/2,
y:canvas.height/2
};
if (circles.length > 155){
circles.shift();
}
// console.log(circles.length);
circles.forEach(function (circle,index) {
//根据中心点和生成圆的圆心位置计算半径
cr = Math.pow(Math.pow((runr.x - circle.x),2)+Math.pow((runr.y - circle.y),2),0.5);
if (circle.color.a < 0){
circles.splice(index,1);
}
console.log(cr);
// 圆心
circle.deltaAngle++;
let x = cr * Math.cos(circle.deltaAngle/180*Math.PI);
let y = cr * Math.sin(circle.deltaAngle/180*Math.PI);
ctx.beginPath();
ctx.arc((runr.x+x),(runr.y+y),circle.r,0,Math.PI*2);
ctx.fillStyle = 'rgba('+circle.color.r+','+circle.color.g+','+circle.color.b+','+(circle.color.a)+')';
ctx.fill();
});
}
</script>
1547
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
