路徑方法
fill() 填充當前繪圖（路徑）
stroke() 繪制已定義的路徑
beginPath() 起始一條路徑，或重置當前路徑
moveTo() 把路徑移動到畫布中的指定點，不創建線條
closePath() 創建從當前點回到起始點的路徑
lineTo() 添加一個新點，然后在畫布中創建從該點到最后指定點的線條
clip() 從原始畫布剪切任意形狀和尺寸的區域
quadraticCurveTo(cpx,cpy,x,y) 創建二次貝塞爾曲線
quadraticCurveTo() 方法通過使用表示二次貝塞爾曲線的指定控制點，向當前路徑添加一個點。
二次貝塞爾曲線需要兩個點。第一個點是用於二次貝塞爾計算中的控制點，第二個點是曲線的結束點。曲線的開始點是當前路徑中最后一個點。如果路徑不存在，那么請使用 beginPath() 和 moveTo() 方法來定義開始點。
開始點：moveTo(20,20)
控制點：quadraticCurveTo(20,100,200,20)
結束點：quadraticCurveTo(20,100,200,20)
cpx 貝塞爾控制點的 x 坐標
cpy 貝塞爾控制點的 y 坐標
x 結束點的 x 坐標
y 結束點的 y 坐標
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 創建三次方貝塞爾曲線
bezierCurveTo() 方法通過使用表示三次貝塞爾曲線的指定控制點，向當前路徑添加一個點。
三次貝塞爾曲線需要三個點。前兩個點是用於三次貝塞爾計算中的控制點，第三個點是曲線的結束點。曲線的開始點是當前路徑中最后一個點。如果路徑不存在，那么請使用 beginPath() 和 moveTo() 方法來定義開始點。
開始點：moveTo(20,20)
控制點 1：bezierCurveTo(20,100,200,100,200,20)
控制點 2：bezierCurveTo(20,100,200,100,200,20)
結束點：bezierCurveTo(20,100,200,100,200,20)
cp1x 第一個貝塞爾控制點的 x 坐標
cp1y 第一個貝塞爾控制點的 y 坐標
cp2x 第二個貝塞爾控制點的 x 坐標
cp2y 第二個貝塞爾控制點的 y 坐標
x 結束點的 x 坐標
y 結束點的 y 坐標
arc(x,y,r,sAngle,eAngle,counterclockwise) 創建弧/曲線（用於創建圓形或部分圓）
arc() 方法創建弧/曲線（用於創建圓或部分圓）。
如需通過 arc() 來創建圓，請把起始角設置為 0，結束角設置為 2*Math.PI。
中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
起始角：arc(100,75,50,0,1.5*Math.PI)
結束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)
x 圓的中心的 x 坐標。
y 圓的中心的 y 坐標。
r 圓的半徑。
sAngle 起始角，以弧度計。（弧的圓形的三點鍾位置是 0 度）。
eAngle 結束角，以弧度計。
counterclockwise 可選。規定應該逆時針還是順時針繪圖。False = 順時針，true = 逆時針。
arcTo(x1,y1,x2,y2,r) 創建兩切線之間的弧/曲線
x1 弧的起點的 x 坐標
y1 弧的起點的 y 坐標
x2 弧的終點的 x 坐標
y2 弧的終點的 y 坐標
r 弧的半徑
isPointInPath() 如果指定的點位於當前路徑中，則返回 true，否則返回 false
<canvas id="d" width="500" height="450" style="border:1px solid #000"></canvas>
<script type="text/javascript">
var a=document.getElementById("d");
var ctx=a.getContext("2d");
ctx.beginPath(); //起始一條路徑，或重置當前路徑
ctx.moveTo(20,20); //把路徑移動到畫布中的指定點，不創建線條
ctx.lineTo(20,120); //添加一個新點，然后在畫布中創建從該點到最后指定點的線條
ctx.lineTo(90,120);
ctx.closePath(); //創建從當前點回到起始點的路徑
ctx.stroke(); //繪制已定義的路徑
ctx.fillStyle="green";
ctx.fill(); //填充當前繪圖（路徑）
ctx.beginPath();
ctx.moveTo(20,150);
ctx.quadraticCurveTo(20,250,200,150); //創建二次貝塞爾曲線
ctx.stroke();
ctx.beginPath();
ctx.moveTo(20,350)
ctx.bezierCurveTo(20,400,200,400,200,350); //創建三次方貝塞爾曲線
ctx.stroke();
ctx.beginPath();
ctx.arc(300,200,20,0,1.5*Math.PI); //創建弧/曲線（用於創建圓形或部分圓）
ctx.stroke();
ctx.beginPath();
ctx.moveTo(300,280);
ctx.lineTo(350,280);
ctx.arcTo(400,280,400,330,50); //創建兩切線之間的弧/曲線
ctx.lineTo(400,380);
ctx.stroke();
ctx.rect(400,20,50,50);
if(ctx.isPointInPath(401,20)){ //如果指定的點位於當前路徑中，則返回 true，否則返回 false
ctx.stroke();
}
ctx.rect(150,20,200,120);
ctx.stroke();
ctx.clip(); //從原始畫布剪切任意形狀和尺寸的區域
ctx.fillStyle="green";
ctx.fillRect(0,0,250,100);
</script>
