繪制路徑

2D上下文支持許多在畫布上繪制路徑的方法

通過路徑可以創造出復雜的形狀和線條,要繪制路徑首先必須調用beginPath()方法,表示開始繪制路徑

然後再通過下列的方法繪制路徑:

• arc(x,y,半徑,起始角度,結束角度,旋轉方向): 用於繪制圓形路徑,以(x,y)為圓心,旋轉方向為一個bool值表示是否以逆時針方向繪制,起始角度以及結束角度的單位都是弧度
• arcTo(x1,y1,x2,y2,半徑): 　　　　 從(x1,x2)為起點繪制一條到(x2,y2)的弧線,且該圓弧的半徑為指定值
• bezierCurveTo(c1x,c1y,c2x,c2y,x,y): 從上一個點為起點繪制一條到(x,y)點的曲線,並且以(c1x,c1y)和(c2x,c2y)兩點為控制點(即繪制貝塞爾曲線)
• lineTo(x,y): 從上一點繪制一條到(x,y)點的曲線
• moveTo(x,y): 起點移到(x,y)點,不畫線
• quadraticCurveTo(cx,cy,x,y): 從上一點繪制一條到(x,y)點的二次曲線,以(cx,cy)為控制點
• rect(x,y,width,height): 從點(x,y)開始繪制一個矩形,寬度為 width 高度為 height,這裏繪制的是矩形路徑,而不是一個獨立的形狀

當路徑繪制完成後有幾種不同的操作:

• closePath(): 如果希望繪制一條連接到路徑起點的線條則可以調用該方法
• fill(): 用fillStyle來填充圖形
• stroke(): 對路徑描邊
• clip(): 在路徑上創建一個剪切區域

例如如果我們希望在canvas中繪制一個時鐘,可以使用以下代碼:

var drawing  = document.getElementById("drawing");

// 確定瀏覽器對canvas的支持
if(drawing.getContext){
    var context = drawing.getContext("2d");

    
 
// 開始路徑
    context.beginPath();

    // 繪制外圓
    context.arc(100,100,99,0,2*Math.PI,false);

    // 繪制內圓
    context.moveTo(194,100);
    context.arc(100,100,94,0,2*Math.PI,false);

    // 繪制分針
    context.moveTo(100,100);
    context.lineTo(100,15);

    // 繪制時針
    context.moveTo(100,100);
    context.lineTo(35,100);

    // 描邊路徑
    context.stroke();
}

為了方便我們對路徑的控制, 2D上下文還提供了一個方法

isPointInPath(x,y) 該方法用於判斷(x,y)是否位於路徑上,在路徑關閉前有效

Javascript高級編程學習筆記（87）—— Canvas(4)繪制路徑