初識canvas元素
HTML5新增了一個元素canvas，用於繪圖使用，其實它的表現和div比較接近（其實他應該屬於inline-block），而提供了許多接口，從而輕易的繪製矩形框、圓三角形等
關於HTML5新增元素
初學者對HTML5的認知，可能覺得兩者之間沒多大的區別，無非是增加了點新東西。
HTML5為我們帶來的真正意義是：我們可以用javascript做更多的事情了；我們可以用javascript實現更好的產品了。
比如HTML5就解決了我們頭疼的跨域問題、實時通信API、他讓我們用網頁開發遊戲變成可能
繪製矩形框
問題：定義樣式與定義height與width
style定義寬高
可以看到，對於canvas來說，還是直接定義寬高的好，不需要用style定義
好了，現在我們再來看看繪製矩形這個方法：
1、使用getElementById方法獲取繪製對象
2、取得上下文getContext('2d')，這都是固定的寫法
3、指定填充的顏色fillStyle和繪製的顏色strokeStyle，即裡面的顏色和邊框的顏色
4、指定線寬linewidth
5、填充/繪製 fillRect/strokeRect 參數為 x,y,width,height
6、若是要使其中一塊透明，使用clearRect
繪製圓形
我們來看看繪製圓過程中其它地方都沒有問題，但是創建圓路徑這塊值得考慮：
arc方法參數很多，依次是：
x
y
半徑
開始弧度（我們一般喜歡角度，所以要轉換）
結束弧度
順時針或者逆時針
主要這個開始角度和結束角度我們來研究下，
moveTo與lineTo
兩次moveto
一次moveto
三次moveto
我認為，使用moveto後相當於新開一起點，之前的一筆勾銷，
若是隻使用lineto的話，他會將幾個點連成線，若是可以組成圖形便會擁有中間色彩
分享到:
閱讀更多 JS加加網 的文章
