一、❤ ❤实现效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/72140cbdd342e5ee208309c8ac7d94a7.gif#pic_center)
二、❤ ❤代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<canvas id="can" ></canvas>
<script>
var can=document.getElementById("can");
var ctx=can.getContext('2d');
var w=document.documentElement.clientWidth-6;
var h=document.documentElement.clientHeight-6;
can.width=w;
can.height=h;
function r(num){
return Math.random()*num;
}
function Ball(text){
this.x=parseInt(r(380))+60;
this.y=parseInt(r(380))+60;
this.r=parseInt(r(40))+10;
this.color='rgb('+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+')';
this.ySpeed=parseInt(r(3))+2
this.xSpeed=parseInt(r(3))+1;
this.text=text;
}
function drawLine(x1,y1,x2,y2,color){
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.strokeStyle=color || '#000';
ctx.stroke();
ctx.closePath();
}
function drawText(text,x,y){
ctx.font='20px 微软雅黑';
ctx.textAlign='top';
ctx.textBaseline='middle';
ctx.fillText(text,x,y);
}
function drawCircle(x,y,r,color){
ctx.beginPath();
ctx.arc(x,y,r,0,2*Math.PI);
ctx.fillStyle=color || '#000';
ctx.fill()
ctx.closePath()
}
Ball.prototype.show=function(){
this.run();
drawCircle(this.x,this.y,this.r,this.color);
drawText(this.text,this.x+this.r,this.y);
};
Ball.prototype.run=function(){
if(this.x-this.r<=0 || this.x+this.r>=w){
this.xSpeed= -this.xSpeed;
}
this.x=this.x+this.xSpeed;
if(this.y-this.r<=0 || this.y+this.r>=h){
this.ySpeed= -this.ySpeed;
}
this.y=this.y+this.ySpeed;
};
var titleArr='JavaScript React Angular vue1 vue2 vue3 canvas css htl bootstrap html5'.split(' ');
var ballArr=[];
for(var i=0;i<10;i++){
var ball=new Ball(titleArr[i]);
ballArr.push(ball);
ball.show();
for (var j = 0; j<i; j++) {
var prevBall=ballArr[j];
drawLine(ball.x,ball.y,prevBall.x,prevBall.y,ball.color);
}
}
setInterval(function(){
ctx.clearRect(0,0,w,h);
for (var i = 0; i<ballArr.length; i++) {
var ball=ballArr[i];
ballArr[i].show()
for (var j = 0; j<i; j++) {
var prevBall=ballArr[j];
drawLine(ball.x,ball.y,prevBall.x,prevBall.y,ball.color);
}
}
},30);
</script>
</body>
</html>
三、❤ ❤思路