1.绘制若干个小球
2.让每个小球都是些碰壁反弹
3.当两个小球之间的距离到达指定长度时，在这两个小球中间绘制一条线。
由于每个小球的碰壁反弹都需要坐标、半径、颜色、速度等值，且每个小球的这鞋值都不一样，如果使用普通的变量，那就需要大量的代码实现，所以我们可以结合面向对象的编程思想，实现这样的效果。
html：
<canvas id="canv" width="1000" height="600"></canvas>
script:
// 获取画布
var canv =document.getElementById('canv');
// 获取画笔
var ctx =canv.getContext('2d');
//承接所有的小球的数组
var ballArr =[];
// 随机数函数
function rn(min,max) {
return Math.round(Math.random()*(max-min))+min;
}
// 封装一个小球类
function Ball(ox,oy,r,bg,vx,vy) {
// 添加公有属性
this.x = ox;
this.y = oy;
this.r = r;
this.bg = bg;
this.vx = vx;
this.vy = vy;
}
// 为小球类添加原型方法
Ball.prototype.move =function() {
// this指向当前调用move函数的这个对象（从类中实例化的对象才可以调用）
// 改变x,y让小球重新绘制
this.x +=this.vx;
this.y +=this.vy;
// 绘制
ctx.beginPath();
ctx.fillStyle =this.bg;
ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
ctx.fill();
// 根据当前的x和y，判断是否需要反弹（改变vx,vy）
if(this.x 1000 -this.r)
this.vx *= -1;
if(this.y 600 -this.r)
this.vy *= -1;
};
// 实例化若干个小球
function getBall() {
for(var i =0;i<200;i++) {
var r =rn(3,6);
var x =rn(r,1000-r);
var y =rn(r,600-r);
var vx =rn(-5,5);
var vy =rn(-5,5);
// 规避vx，vy为0的情况
vx =vx ==0 ? -1 :vx;
vy =vy ==0 ?1 :vy;
var bg ='rgba('+rn(0,255)+','+rn(0,255)+',' +rn(0,255)+','+Math.random()+')';
var ball =new Ball(x,y,r,bg,vx,vy);
ballArr.push(ball);
}
}
getBall();
var mx;
var my;
canv.onmousemove =function (e) {
var ev =event || e;
mx =ev.offsetX;
my =ev.offsetY;
}
// 小球的圆心距满足指定条件，画线
function drawLine() {
for (var i =0;i
for (j =i +1;j
// 判断呢ballArr[i]和ballArr[j]
var a =ballArr[i];
var d =Math.sqrt(Math.pow(a.x -mx,2) +Math.pow(a.y -my,2));
if (d <=100) {
ctx.beginPath();
ctx.strokeStyle ='rgba(' +rn(255,0) +',' +rn(255,0) +',' +rn(255,0) +',' +rn(1,0.2) +')';
ctx.moveTo(mx,my);
ctx.lineTo(a.x,a.y);
ctx.stroke()
var b =ballArr[j];
// 圆心距
var distance =Math.sqrt(Math.pow(a.x -b.x,2) +Math.pow(a.y -b.y,2));
// 圆心距小于指定范围画线
if (distance <=50) {
ctx.beginPath();
ctx.strokeStyle ='rgba(' +rn(0,255) +',' +rn(0,255) +',' +rn(0,255) +',' +Math.random() +')';
ctx.moveTo(a.x,a.y);
ctx.lineTo(b.x,b.y);
ctx.stroke();
}
}
}
}
}
// 频率绘制函数
function draw() {
ctx.clearRect(0,0,1000,600);// 清除画布
// 让所有小球都移动
for(var i inballArr){
ballArr[i].move();
}
drawLine();
requestAnimationFrame(draw);
}
draw();
