Canvas相關(guān)知識(shí)：
1.填充與描邊
兩種基本繪圖操作是填充和描邊。填充栖忠，就是用指定的樣式（顏色蝌戒、漸變或圖像）填充圖形；描邊歌溉，就是只在圖形的邊緣畫線.
重要的兩個(gè)屬性：fillStyle 和strokeStyle

2.繪制矩形
矩形是唯一一種可以直接在2D 上下文中繪制的形狀垄懂。與矩形有關(guān)的方法包括fillRect()骑晶、strokeRect()和clearRect()。這三個(gè)方法都能接收4 個(gè)參數(shù)：矩形的x 坐標(biāo)草慧、矩形的y 坐標(biāo)桶蛔、矩形寬度和矩形高度。這些參數(shù)的單位都是像素漫谷。

3.繪制路徑
2D繪制上下文支持很多在畫布上繪制路徑的方法仔雷。通過(guò)路徑可以創(chuàng)造出復(fù)雜的形狀和線條。要繪制路徑舔示，首先必須調(diào)用beginPath()方法碟婆，表示要開(kāi)始繪制新路徑。然后惕稻，再通過(guò)調(diào)用下列方法來(lái)實(shí)際地繪制路徑竖共。
? arc(x, y, radius, startAngle, endAngle, counterclockwise)：以(x,y)為圓心繪制一條弧線，弧線半徑為radius俺祠，起始和結(jié)束角度（用弧度表示）分別為startAngle 和endAngle公给。最后一個(gè)參數(shù)表示startAngle 和endAngle 是否按逆時(shí)針?lè)较蛴?jì)算，值為false
表示按順時(shí)針?lè)较蛴?jì)算蜘渣。
? arcTo(x1, y1, x2, y2, radius)：從上一點(diǎn)開(kāi)始繪制一條弧線淌铐，到(x2,y2)為止，并且以給定的半徑radius 穿過(guò)(x1,y1)蔫缸。
? bezierCurveTo(c1x, c1y, c2x, c2y, x, y)：從上一點(diǎn)開(kāi)始繪制一條曲線腿准，到(x,y)為止，并且以(c1x,c1y)和(c2x,c2y)為控制點(diǎn)拾碌。
? lineTo(x, y)：從上一點(diǎn)開(kāi)始繪制一條直線吐葱，到(x,y)為止。
? moveTo(x, y)：將繪圖游標(biāo)移動(dòng)到(x,y)倦沧，不畫線唇撬。
? quadraticCurveTo(cx, cy, x, y)：從上一點(diǎn)開(kāi)始繪制一條二次曲線，到(x,y)為止展融，并且以(cx,cy)作為控制點(diǎn)窖认。
? rect(x, y, width, height)：從點(diǎn)(x,y)開(kāi)始繪制一個(gè)矩形，寬度和高度分別由width和height 指定告希。這個(gè)方法繪制的是矩形路徑扑浸，而不是strokeRect()和fillRect()所繪制的獨(dú)立的形狀。
創(chuàng)建了路徑后燕偶，接下來(lái)有幾種可能的選擇喝噪。
如果想繪制一條連接到路徑起點(diǎn)的線條，可以調(diào)用closePath()指么。
如果路徑已經(jīng)完成酝惧，你想用fillStyle 填充它榴鼎，可以調(diào)用fill()方法。另外晚唇，還可以調(diào)用stroke()方法對(duì)路徑描邊巫财，描邊使用的是strokeStyle。最后還可以調(diào)用clip()哩陕，這個(gè)方法可以在路徑上創(chuàng)建一個(gè)剪切區(qū)域平项。

4.繪制文本：fillText()和strokeText()。
這兩個(gè)方法都可以接收4 個(gè)參數(shù)：要繪制的文本字符串悍及、x 坐
標(biāo)闽瓢、y 坐標(biāo)和可選的最大像素寬度。而且心赶，這兩個(gè)方法都以下列3 個(gè)屬性為基礎(chǔ)扣讼。
? font：表示文本樣式、大小及字體园担，用CSS 中指定字體的格式來(lái)指定届谈，例如"10px Arial"。
? textAlign：表示文本對(duì)齊方式弯汰。可能的值有"start"湖雹、"end"咏闪、"left"、"right"和"center"摔吏。
建議使用"start"和"end"鸽嫂，不要使用"left"和"right"，因?yàn)榍皟烧叩囊馑几€(wěn)妥征讲，能同時(shí)適合從左到右和從右到左顯示（閱讀）的語(yǔ)言据某。
? textBaseline：表示文本的基線∈浚可能的值有"top"癣籽、"hanging"、"middle"滤祖、"alphabetic"筷狼、"ideographic"和"bottom"。

5.變換
通過(guò)上下文的變換匠童，可以把處理后的圖像繪制到畫布上埂材。2D 繪制上下文支持各種基本的繪制變換。
創(chuàng)建繪制上下文時(shí)汤求，會(huì)以默認(rèn)值初始化變換矩陣俏险，在默認(rèn)的變換矩陣下严拒，所有處理都按描述直接繪制。
為繪制上下文應(yīng)用變換竖独，會(huì)導(dǎo)致使用不同的變換矩陣應(yīng)用處理裤唠，從而產(chǎn)生不同的結(jié)果。
可以通過(guò)如下方法來(lái)修改變換矩陣预鬓。
? rotate(angle)：圍繞原點(diǎn)旋轉(zhuǎn)圖像angle 弧度巧骚。
? scale(scaleX, scaleY)：縮放圖像，在x 方向乘以scaleX格二，在y 方向乘以scaleY劈彪。scaleX和scaleY 的默認(rèn)值都是1.0。
? translate(x, y)：將坐標(biāo)原點(diǎn)移動(dòng)到(x,y)顶猜。執(zhí)行這個(gè)變換之后沧奴，坐標(biāo)(0,0)會(huì)變成之前由(x,y)表示的點(diǎn)。
? transform(m1_1, m1_2, m2_1, m2_2, dx, dy)：直接修改變換矩陣长窄，方式是乘以如下矩陣滔吠。
m1_1 m1_2 dx
m2_1 m2_2 dy
0 0 1
? setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy)：將變換矩陣重置為默認(rèn)狀態(tài)，然后再調(diào)用transform()挠日。

6.變換1
無(wú)論是剛才執(zhí)行的變換疮绷，還是fillStyle、strokeStyle 等屬性嚣潜，都會(huì)在當(dāng)前上下文中一直有效冬骚，除非再對(duì)上下文進(jìn)行什么修改。雖然沒(méi)有什么辦法把上下文中的一切都重置回默認(rèn)值懂算，但有兩個(gè)方法可
以跟蹤上下文的狀態(tài)變化只冻。如果你知道將來(lái)還要返回某組屬性與變換的組合，可以調(diào)用save()方法计技。
調(diào)用這個(gè)方法后喜德，當(dāng)時(shí)的所有設(shè)置都會(huì)進(jìn)入一個(gè)棧結(jié)構(gòu)，得以妥善保管垮媒。然后可以對(duì)上下文進(jìn)行其他修改舍悯。等想要回到之前保存的設(shè)置時(shí)，可以調(diào)用restore()方法涣澡，在保存設(shè)置的棧結(jié)構(gòu)中向前返回一級(jí)贱呐，恢復(fù)之前的狀態(tài)。連續(xù)調(diào)用save()可以把更多設(shè)置保存到棧結(jié)構(gòu)中入桂，之后再連續(xù)調(diào)用restore()則可以一級(jí)一級(jí)返回

7.關(guān)于圖像
如果你想把一幅圖像繪制到畫布上奄薇，可以使用drawImage()
方法最簡(jiǎn)單的調(diào)用方式是傳入一個(gè)HTML 圖像元素，以及繪制該圖像的起點(diǎn)的x 和y 坐標(biāo)如果你想改變繪制后圖像的大小抗愁，可以再多傳入兩個(gè)參數(shù)馁蒂，分別表示目標(biāo)寬度和目標(biāo)高度呵晚。通過(guò)這種方式來(lái)縮放圖像并不影響上下文的變換矩陣還可以選擇把圖像中的某個(gè)區(qū)域繪制到上下文中。drawImage()方法的這種調(diào)用方式總共需要傳入9 個(gè)參數(shù)：要繪制的圖像沫屡、源圖像的x坐標(biāo)饵隙、源圖像的y坐標(biāo)、源圖像的寬度沮脖、源圖像的高度金矛、目標(biāo)圖像的x 坐標(biāo)、目標(biāo)圖像的y 坐標(biāo)勺届、目標(biāo)圖像的寬度驶俊、目標(biāo)圖像的高度。這樣調(diào)用drawImage()方法可以獲得最多的控制

8免姿、陰影陰影
2D 上下文會(huì)根據(jù)以下幾個(gè)屬性的值饼酿，自動(dòng)為形狀或路徑繪制出陰影。
??shadowColor：用CSS 顏色格式表示的陰影顏色胚膊，默認(rèn)為黑色故俐。
??shadowOffsetX：形狀或路徑x 軸方向的陰影偏移量，默認(rèn)為0紊婉。
??shadowOffsetY：形狀或路徑y(tǒng) 軸方向的陰影偏移量药版，默認(rèn)為0。
??shadowBlur：模糊的像素?cái)?shù)喻犁，默認(rèn)0刚陡，即不模糊。
這些屬性都可以通過(guò)context 對(duì)象來(lái)修改株汉。

9、 漸變
由CanvasGradient 實(shí)例表示歌殃，很容易通過(guò)2D 上下文來(lái)創(chuàng)建和修改乔妈。要?jiǎng)?chuàng)建一個(gè)新的線性漸變，可以調(diào)用createLinearGradient()方法氓皱。這個(gè)方法接收4 個(gè)參數(shù)：起點(diǎn)的x 坐標(biāo)路召、起點(diǎn)的y 坐標(biāo)、終點(diǎn)的x 坐標(biāo)波材、終點(diǎn)的y 坐標(biāo)股淡。調(diào)用這個(gè)方法后，它就會(huì)創(chuàng)建一個(gè)指定大小的漸變廷区，并返回CanvasGradient 對(duì)象的實(shí)例唯灵。
創(chuàng)建了漸變對(duì)象后，下一步就是使用addColorStop()方法來(lái)指定色標(biāo)隙轻。
這個(gè)方法接收兩個(gè)參數(shù)：色標(biāo)位置和CSS 顏色值埠帕。色標(biāo)位置是一個(gè)0（開(kāi)始的顏色）到1（結(jié)束的顏色）之間的數(shù)字