<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
overflow: hidden;
}
</style>
<body>
<canvas id="view" width="" height=""></canvas>
</body>

<script type="text/javascript">

//1.初始化获取元素
var canvas = document.getElementById('view');

var ps = canvas.getContext('2d');

//2.获取窗口可视区域宽高
var width = document.documentElement.clientWidth;

var height = document.documentElement.clientHeight;

//3.更新canvas宽高
canvas.width = width;

canvas.height = height;

//4.定义构造函数

function ball(title){

//初始化xy坐标还有半径

this.r = 15;

this.x = this.random(width-this.r);

this.y = this.random(height-this.r);

//初始化颜色

this.color = this.randomColor();

//初始化移动速度

this.speedX = this.random(4);

this.speedY = this.random(6);

//初始化文本

this.title = title || 'Canvas';




}

//5.添加原型方法

ball.prototype = {

random:function(num){

return parseInt(Math.random()*num)+1

},

randomColor:function(){

return 'rgb('+this.random(255)+','+this.random(255)+','+this.random(255)+')'

},


move:function(){

this.x += this.speedX;

this.y += this.speedY;

if(this.x < this.r ){

this.speedX = Math.abs(this.speedX)

}else if(this.x > width-this.r){

this.speedX = -this.speedX

}

if(this.y < this.r ){

this.speedY = Math.abs(this.speedY)

}else if(this.y > height-this.r){

this.speedY = -this.speedY

}

this.render();

},

render:function(){

ps.beginPath();

ps.fillStyle = this.color;

ps.arc(this.x,this.y,this.r,0,2*Math.PI);

ps.fill();

this.fillText();

},

fillText:function(){

ps.font = '16px 微软雅黑';

ps.fillText(this.title,this.x+this.r+2,this.y+this.r/2-2);

}


}

//单独给ball函数添加属性或方法

ball.children = [];

ball.running = 0;

ball.init = function(list){

//拆分成数组

list = list.split(/\s+/);


//遍历数组并创建对应的球

for(var i = 0; i<list.length; i++){

// 将实例化的球添加到children中 并且指定文本

this.children.push(new this(list[i]))// this就是ball
}

}

ball.play = function(){

//如果已运行返回
if(this.running) return;

this.running = 1;

var children = this.children;

setInterval(function(){

ps.clearRect(0,0,width,height);

//遍历子元素执行move方法


for(var i = 0; i<children.length; i++){

//执行move方法
children[i].move();

// 遍历所有子元素挨个比较计算距离

for(var j = 0; j<children.length;j++){

//i==j时不比较 因为是同一个球

if(i!=j){

//计算两个球之间的距离

var left = children[i].x - children[j].x;

var top1 = children[i].y - children[j].y;

//取绝对值

// left = Math.abs(left);

top1 = Math.abs(top1);


//限制距离 在100-200之间可以连线

if(left<0 && left>=-200 && top1<=200){

//从当前球画到 另一个

ps.beginPath();

ps.strokeStyle = children[i].color;

ps.moveTo(children[i].x,children[i].y);

ps.lineTo(children[j].x,children[j].y);

ps.stroke();

}


}

}

}


},30);

}

ball.init('Html Css Javascript Jquery Css Javascript Jquery Css Javascript Jquery Css Javascript Jquery PHP Mysql XML Ajax JSONP Cavnas BigPipe Memached Redis CSS3 HTML5');

ball.play();

//var obj = new ball();







</script>

</html>