canvas
在H5中 canvas 元素使用 JavaScript 在網頁上繪製圖像。畫布的話本身是300乘以150的原始寬高，是一個矩形區域，可以控制器中的每一個像素。canvas 擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。canvas本身就是一個標籤，它本身是沒有繪圖能力的，，所有的繪製工作必須在JavaScript 內部完成。在JavaScript 內使用 id 來尋找 canvas 元素：var canvas = document.getElementsByTagName(“canvas”)[0]。然後創建context對象：var cxt = canvas.getContext(“2d”)。getContext(“2d”) 對象是內建的 HTML5 對象，擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。下面舉個例子怎麼在canvas裏面畫矩形：
ex：cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);
fillstyle是給這個矩形染色，fillRect則是給這個矩形規定了形狀、位置和尺寸。
接下來舉個怎麼在canvas中畫直線的例子：
ex: ctx.beginPath();//路徑開始
cxt.moveTo(10,10);//起始座標
cxt.lineTo(150,50);// 路徑
cxt.lineTo(10,50);// 路徑
cxt.stroke();//繪製
ctx.closePath();//路徑結束
moveTo()就是最開始的點的座標，然後lineTo()裏面就是途經的位置的座標。
然後舉個畫圓的例子：
cxt.beginPath();
cxt.arc(x,y,半徑，圓開始的位置，圓結束的位置)
cxt.arc(70,18,15,0,Math.PI*2，true);
cxt.closePath();
畫圓的話，前面兩個是圓心的座標，然後是圓的半徑，然後是圓的開始位置和結束位置，還是蠻簡單的。
最後介紹一下怎麼把圖像放到canvas上面：
var img=new Image()
img.src=“flower.png”
cxt.drawImage(img,0,0);
這個是放一張圖片到canvas上面，挺簡單的，new一個新的圖片，再給一個路徑就可以了。但是如果我們想要放很多個圖片到canvas中就要注意了，因爲放到canvas的圖片有加載順序，所以我們可以設置一個progress。把他的總值設置爲100，然後給每張圖片一個這個值，讓所有圖片的progress的值得總和加起來爲100就可以了。