<canvas>是?HTML5?新增的元素，可用于通過使用JavaScript中的腳本來繪制圖形科乎。例如，它可以用于繪制圖形贼急，制作照片茅茂，創(chuàng)建動畫，甚至可以進(jìn)行實時視頻處理或渲染太抓。
默認(rèn)大小為：350px X 150px 且只有width和height兩個屬性空闲。
不同于SVG，HTML中的元素canvas只支持一種原生的圖形繪制：矩形走敌。所有其他的圖形的繪制都至少需要生成一條路徑进副。不過，我們擁有眾多路徑生成的方法讓復(fù)雜圖形的繪制成為了可能悔常。
首先影斑，我們回到矩形的繪制中。canvas提供了三種方法繪制矩形：
繪制一個填充的矩形
strokeRect(x, y, width, height)
繪制一個矩形的邊框
clearRect(x, y, width, height)
清除指定矩形區(qū)域机打，讓清除部分完全透明矫户。
（原生圖形繪制只有矩形）
繪制路徑
圖形的基本元素是路徑。路徑是通過不同顏色和寬度的線段或曲線相連形成的不同形狀的點的集合残邀。一個路徑皆辽，甚至一個子路徑柑蛇，都是閉合的。使用路徑繪制圖形需要一些額外的步驟驱闷。
1耻台、首先，你需要創(chuàng)建路徑起始點空另。
2盆耽、然后你使用畫圖命令去畫出路徑。
3扼菠、之后你把路徑封閉摄杂。
4、一旦路徑生成循榆，你就能通過描邊或填充路徑區(qū)域來渲染圖形析恢。
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
beginPath()
新建一條路徑，生成之后秧饮，圖形繪制命令被指向到路徑上生成路徑映挂。
closePath()
閉合路徑之后圖形繪制命令又重新指向到上下文中。
stroke()
通過線條來繪制圖形輪廓盗尸。
fill()
通過填充路徑的內(nèi)容區(qū)域生成實心的圖形袖肥。
通常來講，調(diào)用beginpath之后 第一個命令是move to()
路徑使用填充（fill）時振劳，路徑自動閉合椎组，使用描邊（stroke）則不會閉合路徑。如果沒有添加閉合路徑closePath()到描述三角形函數(shù)中历恐，則只繪制了兩條線段寸癌，并不是一個完整的三角形。
圓弧節(jié)
繪制圓弧或者圓弱贼，我們使用arc()方法蒸苇。當(dāng)然可以使用arcTo()，不過這個的實現(xiàn)并不是那么的可靠吮旅，所以我們這里不作介紹溪烤。
arc(x, y, radius, startAngle, endAngle, anticlockwise)
畫一個以（x,y）為圓心的以radius為半徑的圓弧（圓）庇勃，從startAngle開始到endAngle結(jié)束檬嘀，按照anticlockwise給定的方向（默認(rèn)為順時針）來生成。
根據(jù)給定的控制點和半徑畫一段圓弧责嚷，再以直線連接兩個控制點鸳兽。
這里詳細(xì)介紹一下arc方法，該方法有六個參數(shù)：x,y為繪制圓弧所在圓上的圓心坐標(biāo)罕拂。radius為半徑揍异。startAngle以及endAngle參數(shù)用弧度定義了開始以及結(jié)束的弧度全陨。這些都是以x軸為基準(zhǔn)。參數(shù)anticlockwise為一個布爾值衷掷。為true時辱姨，是逆時針方向，否則順時針方向戚嗅。
注意：arc()函數(shù)中表示角的單位是弧度雨涛，不是角度。角度與弧度的js表達(dá)式:
弧度=(Math.PI/180)*角度渡处。
