首先先看一下效果：

一、canvas

    canvas是畫布的意思，畫布，就要在其上畫畫，畫畫的步驟有：

① 擡起筆

beginPath()；

② 把原來不需要的擦乾淨

clearRect(0,0,w,h);

引數是：起初x軸座標，起初y軸座標，w是清除區域的看，h是清除區域的高

③ 畫筆蘸上自己需要的顏色

fillStyle = "color";

④ 構思繪畫圖形（此處是一個圓）

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

引數x ， y 指圓心座標 ， r 指圓的半徑

⑤ 將自己的構思進行填充

fill();

二、幀

    每一幀是靜止的影象，在1s內連續播放很多張靜止的圖片，就形成了動畫。

    這裡我們就可以用到定時器setInterval()。可以實現每隔一個時間就播放一幀。

三、每個球的特點

    ① 球的大小不一樣

    ② 顏色不一樣

    ③ 位置不一樣

    ④ 運動的方向不一樣

四、面向物件思想

面向物件有類的概念，通過類可以建立任意多個具有相同的屬性和方法的物件。每一個物件都是基於一個引用型別建立的。

建立一個物件

function createObject(){};或
var createObject = function(){};

建立一個物件的例項

var Objectlist = new createObject();
 

對物件新增屬性與方法：

① 在物件內直接新增屬性與方法

var kk = function(){
    this.name = "keny";
    this.run = function(){};
}

② 在物件的原型中進行新增屬性與方法

kk.prototype.run = function() {
    ...
};
或者
kk.prototype = {
    run: function() {
             
    },
    draw:function(){

    }
};

五、程式碼部分

HTML

<canvas class="aCanvas"></canvas>
 

CSS

body{
	margin: 0;
}
canvas {
    display: block;
}

JS

<script type="text/javascript">
var aCanvas = document.querySelector(".aCanvas");

var cx = aCanvas.getContext('2d');//返回一個表示用來繪製的環境型別的環境 二維繪圖
//選擇幾個自己喜歡的顏色，存在一個數組裡面
var Color =[
	"#99cccc","#FFCC99","#FFCCCC","#0099CC","#FF9999","#FFFF66","#FF6666","#FFFF00","#99CCFF"
];

{//電腦的一些基本資訊
	var w =  innerWidth;//電腦螢幕的寬
	var h = innerHeight;//電腦螢幕的高
	aCanvas.width = w;//定義畫布的寬
	aCanvas.height = h;//定義畫布的高
}

//定義一個隨機函式
function Random(min , max){
	return Math.random()*(max-min)+min;
}
function Bubble(){};
//定義一個Bubble的一個物件
Bubble.prototype = {
	//基本屬性
	init:function(){
		this.x = Random(0,w);//新建立的小球的 x 座標  範圍：0-w
		this.y = Random(0,h);//新建立的小球的 y 座標  範圍：0-h
		this.r = Random(2,6);//新建立的小球的 半徑
		this.color = Color[Math.floor(Random(0,6))];//新建立的小球的 顏色   floor向上取整
		this.vX = Random(-1,1);//該小球在x軸方向的速度
		this.vY = Random(-1,1);//該小球在y軸方向的速度
	},
	//繪畫屬性
	draw:function(){
		cx.beginPath();//把畫筆擡起來
		// cx.clearRect(0,0,w,h);//擦除canvas上矩形區域  需要矩形的左上角座標 X Y 以及矩形的 寬 高。引數：（x,y,width,height）
		//代表畫筆的顏色
		cx.fillStyle = this.color;
		//構思繪製一個圖形
		cx.arc(this.x,this.y,this.r,0,Math.PI*2);//圓心座標 X Y 半徑
		//下筆作畫
		cx.fill();
	},
	//球的運動屬性
	move:function(){
		this.x += this.vX;
		this.y += this.vY;
		if(this.x - this.r < 0||this.x+this.r>w)//擋球碰到螢幕x軸運動邊緣就反彈
			this.vX = -this.vX;
		if(this.y - this.r < 0||this.y+this.r>h)//擋球碰到螢幕y軸運動邊緣就反彈
			this.vY = -this.vY;
		this.draw();//每次運動之後就要進入畫的的下一幀
	}
};
//建立Bubble物件的例項  ->  建立一個小球
//用for迴圈可以穿件多個小球  將它包含在一個函式裡面，方便多次使用
//建立一個數組存放殘生的小球球
var arr = new Array();
function createBubble(num){
	for(var i = 0;i < num;i++){
		var bubble = new Bubble();//建立一個新的小球
		arr.push(bubble);//將每次建立的小球丟進數組裡
		bubble.init();
		bubble.draw();
	}
}
createBubble(666);//建立666個小球
//
setInterval(function(){//實現畫中幀的播放
	 cx.clearRect(0,0,w,h);//每次播放新的下一幀之前要對上一幀進行清除工作
	 for(var item of arr){
	 	item.move();//移動
	 }
},1000/100);//1000/100代表是1000ms 100張   ->   1s 100張

</script>