重寫Context:http://www.imooc.com/video/4324/0
https://www.w3.org/TR/2dcontext/
圖形庫：http://artisanjs.com/忠藤；http://www.rgraph.net/
參考：http://www.imooc.com/video/2434/0
一個Bug:經(jīng)常遇到設(shè)置margin：0 auto但不居中的情況禁熏，加一句display:block肄程。
1.并不是基于對象繪制贯钩，而是基于狀態(tài)context；
2.moveTo是將筆尖挪到某個位置畜份，lineTo是將兩點的位置做連接诞帐，fillStyle和strokeStyle也是對狀態(tài)的描述， stroke(),fill()是真正的繪制爆雹。
3.beginPath(),聲明一個路徑的開始停蕉；closePath()表示當(dāng)前的路徑要被封閉，同時也結(jié)束钙态；繪制封閉多邊形時慧起，建議成對使用這兩個，會自動幫我們處理好封閉結(jié)尾驯绎。
4.當(dāng)我們需要繪制一個需要描邊的填充色的時候完慧，我們應(yīng)該先填充，再描邊剩失。如果先描邊屈尼，再填充，填充色會覆蓋1/2的lineWidth拴孤。
5.繪制矩形的封裝函數(shù)：
rect(x,y,width,height)：勾繪一個矩形的邊框路徑;fillRect(x,y,width,height)：具體的繪制一個填充的矩形;strokeRect(x,y,width,height)：繪制一個帶有邊框的矩形;
6.如果前后繪制的圖形有重疊脾歧，后繪制的圖像會遮擋前面繪制的圖像。注意是遮擋不是覆蓋演熟。
7.線條屬性：
lineCap:butt(default),round,squre????? round(圓“帽子”)和squre(方“帽子”)對比默認的butt多出來一小截"圓頭"和"方頭"鞭执。
lineJoin:miter(default),bevel,round???? miter:永遠呈現(xiàn)一個尖角的形狀司顿，它說明了兩條線段的外邊緣一直擴展到它們相交。當(dāng)兩條線段以一個銳角相交兄纺，斜角連接可能變得很長大溜，還有一個屬性miterLimit（直接查看文檔）；bevel:說明頂點的外邊緣應(yīng)該和一個填充的三角形相交（可以理解為miter的尖角折疊下來）估脆；round:圓角的形式钦奋，說明頂點的外邊緣應(yīng)該和一個填充的弧接合，這個弧的直徑等于線段的寬度疙赠。描述：當(dāng)一個路徑包含了線段和曲線相交的交點的時候付材，lineJoin屬性說明如何繪制這些交點。只有當(dāng)繪制具有寬度的線條的時候圃阳，這一屬性的效果才能表現(xiàn)出來厌衔。
(一)transform
變換矩陣
使用transform設(shè)置變換矩陣，每次設(shè)置是在之前的變換矩陣的基礎(chǔ)上進行設(shè)置的捍岳，transform設(shè)置變換矩陣可以產(chǎn)生級聯(lián)的關(guān)系富寿，每次的變換效果是一次一次的附加在之前的效果上的。
可以用setTransform(1,0,0,1,0,0)使之前的transform失效锣夹，只使用當(dāng)前setTransform的值作喘。
(二)fillStyle：Linear Gradient(線性漸變),Radial Gradient(徑向漸變),createPattern
fillStyle=color
#ffffff；#642晕城；rgb(255,128,0);rgba(100,100,100,0.8);hsl(20,62%,28%);hsla(40,82%,33%,0.6);red
(1)線性漸變
step1
var grd=context.createLinearGradient(xstart,ystart,xend,yend);
Step2
grd.addColorStop(stop,color);//可以添加無數(shù)個，用來設(shè)置起始點到終點的顏色
context.fillStyle=grd;
注意：如果漸變色只填充了畫布的一部分窖贤，那么剩下部分用最后的顏色填充砖顷。如果超出畫布，會有部分顏色不顯示赃梧。
(2)徑向漸變
Step 1
var grd=context.createRadialGradient(x0,y0,r0,x1,y1,r1);
Step2
grd.addColorStop(stop,color);
(3)fillStyle=img || canvas || video
createPattern:
①createPattern(img,repeat-style)
repeat-style:no-repeat/repeat-x/repeat-y/repeat
②createPattern(canvas,repeat-style)
(三)arcTo（x1,y1,x2,y2,radius）:另一種弧線繪制方法：http://www.imooc.com/video/4217
弧線繪制的起點是(x0,y0)滤蝠，但切點可能使任意一點。(x0,y0)到(x1,y1)及(x1,y1)到(x2,y2)只是輔助線授嘀，切點也可能在輔助線的延長線上物咳。
③createPattern(video,repeat-style)
(四)貝塞爾曲線? Bezier:
貝塞爾二次曲線：QuadraticCurveTo：tinyurl.com/html5quadratic
context.moveTo(x0,y0);//起始點
context.quadraticCurveTo(x1,y1,x2,y2);//控制點和結(jié)束點
貝塞爾三次曲線：BezierCurveTo：tinyurl.com/html5bezier
context.moveTo(x0,y0);//起始點
content.bezierCurveTo(x1,y1,x2,y2,x3,y3);//兩個控制點和結(jié)束點
(五)font,默認值："20px sans-serif"
文字渲染基礎(chǔ)：context.font="bold 40px Arial"；context.fillText(String,x,y,[maxlen]);或者 context.strokeText(String,x,y,[maxlen]);//String是要添加的字符串蹄皱，x,y是要添加的位置,[maxlen]描述的是我們要繪制這行文字览闰，所可以使用的最長寬度是多少，也可不寫巷折。
context.font=font-style font-variant font-weight font-size font-family
font-style:normal(Default)??????? italic(斜體字)????? oblique(傾斜字體)
同時压鉴，font-style也可以使用漸變色或圖片填充。
font-variant:normal(Default)??????? small-caps(小型的大寫字母來顯示所有的小寫字母)
font-weight:lighter??????? normal(默認)????????? bold(粗體)???????? bolder
font-size:20px??????? 2em??????? 150%
font-family:設(shè)置多種字體備選???????? 支持@font-face??????????? Web安全字體
文本對齊
context.textAlign=left??? center??? right,基準(zhǔn)：給定文本的初始坐標(biāo)值锻拘，分別以此為左邊界油吭，中間點和右邊界击蹲。
context.textBaseline= top??????? middle??????????bottom針對繪制文字的坐標(biāo)的Y值而言，分別以此為上邊界婉宰，中間點和下邊界歌豺；還有三個屬性值alphabetic(Default)------基于拉丁字母的語言,ideographic------基于中文，日本語,hanging--------基于印度語
文本的度量
context.measureText(string).width：傳入一個字符串心包，返回一個對象类咧，這個對象擁有一個width的屬性，這個屬性將返回傳入的這個字符串在canvas上渲染的時候渲染出的字符串的寬度谴咸，在調(diào)用這個函數(shù)前轮听，一定要設(shè)置好相應(yīng)的font屬性。
陰影
context.shadowColor??????????????? ???||?????????? ???? context.shadowOffsetX?????????????????????????? ||????????????? context.shadowOffsetY??????????????? ||????????????????context.shadowBlur:陰影模糊的程度
globalAlpha
context.globalAlpha=1(Default):使全局具有透明度的方式
globalCompositeOperation:繪制的圖像在全局的時候所產(chǎn)生的效果
globalCompositeOperation="source-over"(Default)：指后繪制的圖形和前面繪制的圖形如果發(fā)生遮擋的話岭佳，后繪制的圖形就會壓蓋在前面繪制的圖形上血巍。source指后繪制的圖形。globalCompositeOperation="destination-over"前面繪制的圖形會壓蓋珊随，destination指前繪制的圖形述寡。共有11種不同的效果，可以查看W3C文檔Ｒ抖础ｖ晷住！
剪輯區(qū)域?????? context.clip()
cotext.beginPath();
context.arc(400,400,150,0,Math.PI*2);
context.clip();
beginPath()后衩辟，用arc函數(shù)繪制了一個圓形的路徑螟炫，之后對于這個圓形的路徑并不把它繪制出來而使用了一次clip(),使用clip()的作用是使用剛才繪制的路徑，把它剪切為當(dāng)前的繪制環(huán)境艺晴。
clearRect
context.clearRect(x,y,width,height):對指定區(qū)域的矩形進行一次清空操作昼钻。
isPointInPath
context.isPointInPath(x,y):點擊檢測函數(shù)，傳入的參數(shù)(x,y)組成一個點的坐標(biāo)封寞，判斷這個點的坐標(biāo)是否在當(dāng)前規(guī)劃的路徑內(nèi)
