現(xiàn)把canvas的知識(shí)點(diǎn)總結(jié)如下，以便隨時(shí)查閱。

1、填充矩形 fillRect(x,y,width,height);

2、繪制矩形邊框 strokeRect(x,y,width,height);

3、擦除矩形 clearRect(x,y,width,height);

4、填充樣式 fillStyle="red"; 樣式可以為顏色、漸變和圖像。

5、描邊樣式 strokeStyle="red";

6、描邊線條的寬度 lineWidth=4;

7、線條末端形狀 lineCap="butt"; butt(對(duì)接)/round(圓)/square(方)，默認(rèn)情況下是butt;

8、線條相交樣式 lineJoin="miter"; miter(尖角)/round(圓角)/bevel(斜角),默認(rèn)尖角;

9、開(kāi)始繪制路徑 beginPath();

10、結(jié)束路徑 closePath(); 創(chuàng)建路徑后，如果想繪制一條連接到路徑起點(diǎn)的線條，可以調(diào)用closePath();

11、繪制圓弧 arc(x,y,radius,startAngle,endAngle,true/false);

12、繪制弧線 arcTo(x1,y1,x2,y2,radius) 從上一點(diǎn)開(kāi)始繪制一天弧線，到x2,y2為止，并且以給定的半徑radius穿過(guò)x1,y1;

13、moveTO(x,y); 將繪圖游標(biāo)移動(dòng)到（x,y）,不畫(huà)線

14、lineTo(x,y); 從上一點(diǎn)開(kāi)始繪制一條直線

15、二次貝塞爾曲線： quadraticCurveTo(cx,cy,x,y); 從上一點(diǎn)開(kāi)始繪制二次曲線，到x,y為止，cx,cy作為控制點(diǎn)。

16、三次貝塞爾曲線： bezierCurveTo(cx1,cy1,cx2,cy2,x,y); 從上一點(diǎn)開(kāi)始繪制二次曲線，到x,y為止，cx1,cy1和cx2,cy2作為控制點(diǎn)。

17、rect(x,y,width,height);從點(diǎn)x,y開(kāi)始繪制矩形，寬度和高度分別由width和height指定。這個(gè)方法繪制的是矩形路徑，而不是獨(dú)立形狀。

18、繪制文本：

　　(1) 填充文本：fillText("hello",x,y,width);width為可選的最大像素寬度,如果文本大于最大寬度，則文本會(huì)收縮以適應(yīng)最大寬度。
(2) 文本描邊：strokeText("hello",x,y,width);width為可選的最大像素寬度。
(3) 文本樣式：font="bold 14px Arial";
(4) 水平文本對(duì)齊：textAlign='start';// start, end, left,right, center。默認(rèn)值:start。以文字的起始點(diǎn)(x,y)為基點(diǎn)的縱軸進(jìn)行對(duì)齊。
(5) 垂直文本對(duì)齊：textBaseline='alphabetic';//top, hanging, middle,alphabetic, ideographic, bottom。默認(rèn)值：alphabetic。以文字的起始點(diǎn)(x,y)為基點(diǎn)的橫軸進(jìn)行對(duì)齊。
(6) 文本的寬度：var text="hello"; var length=context.measureText(text)；參數(shù)text為所需要繪制的文字

19、變換

　　(1) rotate(angle):圍繞原點(diǎn)旋轉(zhuǎn)圖像angle弧度。
也可以使用transform(Math.cos(angle*Math.PI/180),Math.sin(angle*Math.PI/180),-Math.sin(angle*Math.PI/180),Math.cos(angle*Math.PI/180),0,0);
(2) scale(x,y):縮放圖像。也可以使用transform(x,0,0,y,0,0);
(3) translate(x,y):將坐標(biāo)原點(diǎn)移動(dòng)到x,y，執(zhí)行這個(gè)變換之后，坐標(biāo)0,0會(huì)變成之前由x,y表示的點(diǎn)。也可以使用transform(1,0,0,1,x,y);
(4) transform(<number>, <number>, <number>,<number>,x, y);
(5) setTransform(<number>, <number>, <number>,<number>,x, y);將變換矩陣重置為默認(rèn)狀態(tài)，然后再調(diào)用transform();

20、圖形組合