Javascript高級編程學習筆記(87)—— Canvas(4)繪制路徑
阿新 • • 發佈:2019-03-15
drawing pre scrip 都是 als color 一點 控制 clas
繪制路徑
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)繪制路徑