（以下為個(gè)人理解，可能有理解不當(dāng)或不足之處，望大家批評(píng)指正。）
Canvas（HTML5新增標(biāo)簽）
Canvas API（畫布）是在HTML5中新增的標(biāo)簽用于在網(wǎng)頁(yè)實(shí)時(shí)生成圖像，并且可以操作圖像內(nèi)容，基本上它是一個(gè)可以用JavaScript操作的位圖。
這個(gè) HTML 元素是為了客戶端矢量圖形而設(shè)計(jì)的。它自己沒有行為，但卻把一個(gè)繪圖 API 展現(xiàn)給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。
接下來做一個(gè)用canvas實(shí)現(xiàn)的彈球效果（效果見上圖）
首先在html中新建一個(gè)canvas畫布，id名myCanvas。
width 屬性 : 畫布的寬度。這個(gè)屬性可以指定為一個(gè)整數(shù)像素值或者是窗口寬度的百分比。當(dāng)這個(gè)值改變的時(shí)候，在該畫布上已經(jīng)完成的任何繪圖都會(huì)擦除掉。默認(rèn)值是 300。
height 屬性 : 畫布的高度。這個(gè)屬性可以指定為一個(gè)整數(shù)像素值或者是窗口高度的百分比。當(dāng)這個(gè)值改變的時(shí)候，在該畫布上已經(jīng)完成的任何繪圖都會(huì)擦除掉。默認(rèn)值是 300。
在JavaScript中，根據(jù)id名獲取canvas。
大多數(shù) Canvas 繪圖 API 都沒有定義在 <canvas> 元素本身上，而是定義在通過畫布的 getContext() 方法獲得的一個(gè)“繪圖環(huán)境”對(duì)象上。
建立一個(gè)隨機(jī)函數(shù)，參數(shù)最小值min， 最大值max。
屏幕快照 2016-05-28 下午2.47.22.png
因?yàn)閺椙虻拇笮 ㈩伾?、初始位置、移?dòng)速度不同，所以依據(jù)上面建立的隨機(jī)函數(shù)，設(shè)置彈球的屬性。
隨機(jī)位置
彈球以圓心為中點(diǎn)移動(dòng)，圓心x坐標(biāo)移動(dòng)范圍最大為畫布寬減半徑
判斷x坐標(biāo)是否小于半徑，如果小于半徑，圓超出畫布，則半徑值賦給x坐標(biāo)；如果大于半徑，保持初始x坐標(biāo)（y坐標(biāo)亦同）。
隨機(jī)方向
隨機(jī)設(shè)置，判斷在0 - 3范圍內(nèi)隨機(jī)生成的數(shù)值是否大于范圍內(nèi)的半數(shù)2，如果是，彈球初始方向?yàn)檎?；如果不是，反向移?dòng)。
屏幕快照 2016-05-28 下午4.25.32.png
在JavaScript中，prototype對(duì)象是實(shí)現(xiàn)面向?qū)ο蟮囊粋€(gè)重要機(jī)制。
每個(gè)函數(shù)就是一個(gè)對(duì)象（Function），函數(shù)對(duì)象都有一個(gè)子對(duì)象 prototype對(duì)象，類是以函數(shù)的形式來定義的。prototype表示該函數(shù)的原型，也表示一個(gè)類的成員的集合。
給構(gòu)造函數(shù)Round添加原型方法 draw、move
draw 繪制圓
move 彈球移動(dòng)
判斷，碰壁回彈。
屏幕快照 2016-05-28 下午5.42.18.png
新建一個(gè)數(shù)組
新建函數(shù)，for循環(huán)，設(shè)置圓的數(shù)量，遍歷所有的圓， 調(diào)用Round構(gòu)造函數(shù)和draw 、move方法函數(shù)。
調(diào)用函數(shù)。
加到數(shù)組中。
新建執(zhí)行函數(shù)，先清空畫布。
遍歷所有的圓形對(duì)象, 讓對(duì)象自己重繪, 移動(dòng)
requestAnimationFrame 按幀數(shù)執(zhí)行，執(zhí)行過程中不斷刷新，速率快肉眼不好分辨。所以開始前清空畫布，以防重疊。
屏幕快照 2016-05-28 下午5.56.50.png
