1.canvas 畫布
<canvas>?看起來和?<img>?標簽一樣捧存，只是?<canvas>?只有兩個可選的屬性?width担败、heigth?屬性，而沒有?src吗货、alt?屬性狈网。如果不給?<canvas>?設(shè)置?widht、height?屬性時勇垛，則默認?width為300窥摄、height?為 150崭放，單位都是?px。也可以使用?css?屬性來設(shè)置寬高建峭，但是如寬高屬性和初始比例不一致亿蒸，他會出現(xiàn)扭曲边锁。所以波岛，建議永遠不要使用?css?屬性來設(shè)置?<canvas>?的寬高。
var canvas = document.getElementById('id');
var ctx = canvas.getContext('2d');
監(jiān)測支持性?
if (canvas.getContext)
{?
?????var ctx = canvas.getContext('2d'); // drawing code here
}?
else
?{?
?????// canvas-unsupported code here
}
2.繪制矩形?
canvas只支持一種原生的圖形繪制：矩形贡蓖，所有其他圖形都至少需要生成一種路徑（path），我們擁有眾多路徑生成的方法煌茬，讓繪制復(fù)雜的圖形成為了可能?
canvas提供了三種方法繪制矩形?
（1）。fileRect(x,y,width,height):繪制一個填充矩形??
（2）坛善。strokeRect(x,y,width,height):繪制一個矩形的邊框
（3）。clearRect(x,y,width,height):清除指定的矩形區(qū)域浑吟，然后這塊區(qū)域就會變得完全透明笙纤。
參數(shù)說明：x,y:指的是矩形左上角的坐標组力，相對于canvas的最高點省容。
? ? ? ? ? ? ? ? ? ?width,height:指的是繪制的矩形的寬和高?
3.繪制路徑 （path）
圖形的基本元素是路徑 。路徑是通過不同顏色和寬度的線段或曲線相連形成的不同形狀的點的集合燎字。一個路徑腥椒，或者一個子路徑候衍，都是閉合的笼蛛。
使用路徑繪制圖形需要額外的一些步驟：
（1）.創(chuàng)建路徑起始點
（2）.調(diào)用繪制方法去繪制路徑?
（3）.把路徑封閉??
（4）.一旦路徑生成滨砍，通過描邊或者填充路徑區(qū)域來渲染圖形
方法：
（1）。beginPath()
新建一條路徑，路徑一旦創(chuàng)建成功绒窑，圖形繪制命令會被指向到路徑上生成路徑?
（2）。moveTo（x,y）
把 畫筆移動到指定坐標x,y,相當于設(shè)置路徑的起始點坐標?
（3）些膨。closePath()
閉合路徑之后订雾，圖形繪制命令有重新指向到上下文中?
（4）。stroke()
通過線條來繪制圖形輪廓??
（5）职抡。fill()
通過填充路徑的內(nèi)容區(qū)域來生成實心的圖形?
4.繪制圓弧?
有兩個方法可以繪制圓弧?
（1）葬燎。arc(x,y,r,startAngle,endAngle,anticlockwise):以（x,y）為圓心误甚，以r為半徑缚甩，從?startAngle弧度開始到endAngle弧度結(jié)束。anticlosewise是布爾值窑邦，true表示逆時針擅威，false表示順時針(默認是順時針)。注意：這里的度數(shù)都是弧度冈钦，0弧度是指x軸正方形
randians = (Math.PI/180)*degrees //角度轉(zhuǎn)換成弧度的方法?
（2）郊丛。arcTo(x1,y1,x2,y2,radius):根據(jù)給定的控制點和半徑畫一段圓弧 ，最后再以直線控制這兩個控制點?
5.貝塞爾曲線?
繪制二次貝塞爾曲線
quadraticCurveTo(cplx,cply,x,y);
參數(shù)1和2：控制點坐標?
參數(shù)3和4：結(jié)束點坐標
6.添加樣式和顏色?
（1）fileStyle = color? 設(shè)置圖形的填充顏色??
（2）strokeStyle = color 設(shè)置圖形輪廓的顏色?
