原生js制作（es6）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#myCanvas{
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="300"></canvas>
<script>
var rand = (min,max) => parseInt(Math.random()*(max-min)+min);
var myCanvas = document.querySelector(‘#myCanvas‘);
var ctx = myCanvas.getContext(‘2d‘);
const canvasWidth = myCanvas.width;
const canvasHeigh = myCanvas.height;
class Ball{
constructor(ctx,canvasWidth,canvasHeigh){
this.ctx = ctx;
// 颜色
this.color = `rgb(${rand(1,256)},${rand(1,256)},${rand(1,256)})`;
// 半径
var r = rand(2,10);
this.r = r;
// 坐标
this.x = rand(r,canvasWidth-r);
this.y = rand(r,canvasHeigh-r);
// 可移动的峰值
this.maxWidth = canvasWidth - r;
this.maxHeight = canvasHeigh - r;
// 速度
var speedX = rand(1,3);
this.speedX = rand(0,2) > 0 ? speedX : -speedX;
var speedY = rand(1,3);
this.speedY = rand(0,2) > 0 ? speedY : -speedY;
}
draw(){
this.ctx.beginPath();
this.ctx.fillStyle = this.color;
this.ctx.arc(this.x,this.y,this.r,0,Math.PI*2,true);
this.ctx.closePath();
this.ctx.fill();
}
move(){
this.x += this.speedX;
if(this.x >= this.maxWidth){
this.speedX *= -1;
}else if(this.x < this.r){
this.speedX *= -1;
}
this.y += this.speedY;
if(this.y >= this.maxHeight){
this.speedY *= -1;
}else if(this.y < this.r){
this.speedY *= -1;
}
}
}
var balls = [];
for(let i=0;i<100;i++){
var ball = new Ball(ctx,canvasWidth,canvasHeigh);
balls.push(ball);
}
setInterval(function(){
ctx.clearRect(0,0,canvasWidth,canvasHeigh)
for(let key in balls){
var ball = balls[key];
ball.draw();
ball.move();
}
},30)
</script>
</body>
</html>
时间： 2024-09-14 10:57:14