[HTML5] Canvas繪制簡單形狀

使用canvas來進行繪畫，它像很多其他dom對象一樣，有很多屬性和方法，操作這些方法，實作繪畫

擷取canvas對象，調用document.getElementById()方法

調用canvas對象的getContext()方法，擷取context對象，參數：String的”2d”

繪制線段

調用context對象的moveTo()方法，把起點位置定義好，參數：x，y

調用context對象的lineTo()方法，把終點位置定義好，參數：x，y

調用context對象的stroke()方法，畫一條線

如果不調用moveTo()方法，起點的位置是上次的點

繪制矩形

調用context對象的fillRect()方法，填充矩形，參數：起點橫坐标，起點縱坐标，寬度，高度

調用context對象strokeRect()方法，邊框矩形，參數：起點橫坐标，起點縱坐标，寬度，高度

例如：context.fillRect(0,0,100,100); 會畫出一個黑色的矩形

注意：html5 canvas fillRect坐标和大小一直不對，是因為canvas的寬度和高度必須内聯在canvas标簽中才對

繪制扇形

調用context對象的beginPath()方法，開啟路徑

調用context對象的moveTo()方法，把路徑移動到圓心位置，參數：x，y

調用context對象的arc()方法，繪制圓弧，參數：圓心x坐标，圓心y坐标，開始角度，結束角度

調用context對象的closePath()方法，關閉路徑

調用context對象的fill()方法，填充顔色

繪制貝塞爾曲線

調用context對象的bezierCurveTo()方法，繪制曲線路徑，

參數：第一控制點x，第一控制點y，

           第二控制點x，第二控制點y，

           最終控制點x，最終控制點y