0.效果预览
ex.gif
1.完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>气泡效果</title>
</head>
<body>
<canvas></canvas>
</body>
<script>
class Circle{
constructor(color, radius, v, angle, x, y){
this.color = color;
this.radius = radius;
this.v = v;
this.angle = angle;
this.x = x;
this.y = y;
}
draw(ctx){
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI);
ctx.closePath();
ctx.fillStyle = this.color;
ctx.fill();
}
}
function rColor(){
let r = 255*Math.random();
let g = 255*Math.random();
let b = 255*Math.random();
let o = Math.random();
return 'rgba(' + r + ','+ g + ','+ b + ','+ o + ')';
}
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
for(let i=0; i<NUM; i++){
arr[i].x += arr[i].v*Math.cos(arr[i].angle);
arr[i].y += arr[i].v*Math.sin(arr[i].angle);
arr[i].draw(ctx);
}
setTimeout(draw, 50);
}
let arr = [];
const NUM = 1000;
let centerX, centerY;
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
centerX = canvas.width/2;
centerY = canvas.height/2;
for(let i=0; i<NUM; i++){
arr.push(new Circle(rColor(),10*Math.random()+1,5*Math.random()+1,360*Math.random(),centerX,centerY));
}
draw();
</script>
</html>
欢迎讨论。
