1.繪制若干個(gè)小球
2.讓每個(gè)小球都是些碰壁反彈
3.當(dāng)兩個(gè)小球之間的距離到達(dá)指定長(zhǎng)度時(shí)，在這兩個(gè)小球中間繪制一條線。
由于每個(gè)小球的碰壁反彈都需要坐標(biāo)、半徑、顏色、速度等值，且每個(gè)小球的這鞋值都不一樣，如果使用普通的變量，那就需要大量的代碼實(shí)現(xiàn)，所以我們可以結(jié)合面向?qū)ο蟮木幊趟枷?，?shí)現(xiàn)這樣的效果。
html：
<canvas id="canv" width="1000" height="600"></canvas>
script:
// 獲取畫(huà)布
var canv =document.getElementById('canv');
// 獲取畫(huà)筆
var ctx =canv.getContext('2d');
//承接所有的小球的數(shù)組
var? ? ballArr =[];
// 隨機(jī)數(shù)函數(shù)
function rn(min,max) {
return Math.round(Math.random()*(max-min))+min;
}
// 封裝一個(gè)小球類
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指向當(dāng)前調(diào)用move函數(shù)的這個(gè)對(duì)象（從類中實(shí)例化的對(duì)象才可以調(diào)用）
// 改變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();
// 根據(jù)當(dāng)前的x和y，判斷是否需要反彈（改變vx,vy）
? ? if(this.x 1000 -this.r)
this.vx *= -1;
if(this.y 600 -this.r)
this.vy *= -1;
};
// 實(shí)例化若干個(gè)小球
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);
// 規(guī)避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;
}
// 小球的圓心距滿足指定條件，畫(huà)線
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));
// 圓心距小于指定范圍畫(huà)線
? ? ? ? ? ? ? ? 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();
}
}
}
}
}
// 頻率繪制函數(shù)
function draw() {
ctx.clearRect(0,0,1000,600);// 清除畫(huà)布
// 讓所有小球都移動(dòng)
? ? for(var i inballArr){
ballArr[i].move();
}
drawLine();
requestAnimationFrame(draw);
}
draw();
