繪制矩形
fillRect(x,y,width,height)
繪制一個填充的矩形
strokeRect(x,y,width,height)
繪制一個矩形的邊框
clearRect(x,y,width,height)
清除制定矩形區(qū)域蛛壳，讓清除部分完全透明
上述中參數(shù)（x,y）指定了在畫布上矩形的左上角（相對于原點）的坐標妹萨，width和height設置矩形的尺寸
繪制路徑
1.首先荒给，你需要創(chuàng)建路徑起始點细睡。
2.然后你使用畫圖命令去畫出路徑钝诚。
3.之后你把路徑封閉铣焊。
4.一旦路徑生成俏让，你就能通過描邊或填充路徑區(qū)域來渲染圖形桦他。
beginPath()
新建一條路徑，生成之后霹期，圖形繪制命令被指向到路徑上生成路徑叶组。
注意：當前路徑為空，即調(diào)用beginPath()之后历造，或者canvas剛建的時候甩十，第一條路徑構造命令通常被視為是moveTo（），無論最后的是什么吭产。出于這個原因侣监，你幾乎總是要在設置路徑之后專門指定你的起始位置。
moveTo(x,y)
將筆觸移動到指定的坐標x以及y上臣淤。
繪制一條從當前位置到指定x以及y位置的直線橄霉。
closePath()
閉合路徑之后圖形繪制命令又重新指向到上下文中。
stroke()
通過線條來繪制圖形輪廓邑蒋。
fill()
通過填充路徑的內(nèi)容區(qū)域生成實心的圖形姓蜂。
繪制圓或圓弧
arc(x, y, radius, startAngle, endAngle, anticlockwise)
畫一個以（x,y）為圓心的以radius為半徑的圓弧（圓）医吊，從startAngle開始到endAngle結束钱慢，按照anticlockwise給定的方向（默認為順時針）來生成。
注意：arc()函數(shù)中的角度單位是弧度卿堂，不是度數(shù)束莫。角度與弧度的js表達式:radians=(Math.PI/180)*degrees。
arcTo(x1, y1, x2, y2, radius)?? // 用的不多
根據(jù)給定的控制點和半徑畫一段圓弧草描，再以直線連接兩個控制點览绿。
二次貝塞爾曲線及三次貝塞爾曲線
quadraticCurveTo(cp1x, cp1y, x, y)
繪制二次貝塞爾曲線，cp1x,cp1y為一個控制點陶珠，x,y為結束點挟裂。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
繪制三次貝塞爾曲線，cp1x,cp1y為控制點一揍诽，cp2x,cp2y為控制點二诀蓉，x,y為結束點栗竖。
Path2D對象
Path2D()會返回一個新初始化的Path2D對象（可能將某一個路徑作為變量——創(chuàng)建一個它的副本，或者將一個包含SVG path數(shù)據(jù)的字符串作為變量）渠啤。
newPath2D();// 空的Path對象
newPath2D(path);// 克隆Path對象
newPath2D(d);// 從SVG建立Path對象
Path2D.addPath(path [, transform])?
添加了一條路徑到當前路徑（可能添加了一個變換矩陣）狐肢。
示例
function draw(){
???????????? var canvas = document.getElementById("canvas");
???????????? if(canvas.getContext){
?????????????????? var ctx = canvas.getContext('2d');
?????????????????? var rectangle = new Path2D(); // 創(chuàng)建Path2D對象
?????????????????? rectangle.rect(10,10,50,50);
? ? ? ? ? ? ? ? ? ? var circle= new Path2D(); // 創(chuàng)建Path2D對象
??????????????????? circle.moveTo(125,35);
??????????????????? circle.arc(100,35,25,0,2*Math.PI)
??????????????????? ctx.stroke(rectangle);
??????????????????? ctx.fill(circle);
?????????????? }
}
