小气球漂浮

最新推荐文章于 2022-05-07 16:46:04 发布

diannagl

最新推荐文章于 2022-05-07 16:46:04 发布

阅读量595

点赞数

分类专栏： h5 css web js

本文链接：https://blog.csdn.net/Yotkan/article/details/78413955

版权

h5 同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

css

15 篇文章 0 订阅

订阅专栏

web

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>小球</title>
<style media="screen">
* {
margin: 0;
padding: 0;
}
</style>
</head>

<body>
<canvas id="canvas"></canvas>
</body>
<script type="text/javascript">
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
canvas.width = document.documentElement.clientWidth - 5;
canvas.height = document.documentElement.clientHeight - 5;

function Ball() {
this.radius = this._rand(10, 50);
this.cx = this._rand(this.radius, canvas.width - this.radius);
this.cy = this._rand(this.radius, canvas.height - this.radius);
this.speedX = this._rand(-3, 3);
this.speedY = this._rand(-3, 3);
this.color = "rgba(" + this._rand(0, 255) + "," + this._rand(0, 255) + "," + this._rand(0, 255) + "," + Math.random() + ")"
}
Ball.prototype.draw = function() {
ctx.beginPath();
ctx.arc(this.cx, this.cy, this.radius, 0, 2 * Math.PI);
ctx.fillStyle = this.color;
ctx.fill();
}
Ball.prototype.move = function() {
if (this.cx + this.radius >= canvas.width || this.cx - this.radius <= 0) {
this.speedX *= -1;
}
if (this.cy + this.radius >= canvas.height || this.cy - this.radius <= 0) {
this.speedY *= -1;
}
this.cx += this.speedX;
this.cy += this.speedY;
this.draw();
}
Ball.prototype._rand = function(min, max) {
return parseInt(Math.random() * (max - min)) + min;
}
var balls = [];
for (var i = 0; i < 100; i++) {
var ball = new Ball();
balls.push(ball);
}
// setInterval(function(){
// ctx.clearRect(0,0,2000,2000);
// for(var i=0;i<balls.length;i++){
// var ball = balls[i];
// ball.move();
// }
// },20)

function _run() {
ctx.clearRect(0, 0, 2000, 2000);
for (var i = 0; i < balls.length; i++) {
var ball = balls[i];
ball.move();
}
requestAnimationFrame(_run);
}
_run();
</script>

</html>