更新時(shí)間:2021-03-31 來源:黑馬程序員 瀏覽量:
在畫布中繪制的所有圖形都會(huì)形成路徑,通過初始位置和連線端點(diǎn)便會(huì)形成一條繪制路徑。路徑需要通過路徑狀態(tài)進(jìn)行分割或閉合,來產(chǎn)生不同的路徑樣式。路徑的狀態(tài)包括重置路徑和閉合路徑兩種,具體介紹如下。
1. 重置路徑
在同一畫布中,我們添加再多的連線端點(diǎn)也只能有一條路徑,如果想要開始新的路徑,就需要使用beginPath()方法,當(dāng)出現(xiàn)beginPath()即表示路徑重新開始。示例代碼如下。
<body> <canvas id="cas" width="1000" height="300"> 您的瀏覽器不支持canvas標(biāo)簽。 </canvas> </body> </html> <script> var context = document.getElementById("cas").getContext('2d'); context.moveTo(10,10);//定義初始位置 context.lineTo(300,10);//定義連線端點(diǎn) context.lineWidth='5'; context.strokeStyle='#00f'; context.stroke();//定義描邊 context.moveTo(10,50);//定義初始位置 context.lineTo(300,50);//定義連線端點(diǎn) context.lineWidth='5'; context.strokeStyle='#f00'; context.stroke();//定義描邊 </script>運(yùn)行示例代碼,效果如圖1所示。
圖 1 設(shè)置線條顏色
由于兩條線在同一路徑中,因此第一條線并沒有顯示預(yù)期的藍(lán)色,而是被紅色覆蓋。想要讓線顯示不同的顏色,就需要對路徑進(jìn)行分割。在第13行代碼和第14行代碼之間添加以下代碼。
context.beginPath();//重置路徑
運(yùn)行示例代碼,效果如圖2所示。
圖2 設(shè)置線條顏色
2. 閉合路徑
閉合路徑就是將我們繪制的開放路徑,進(jìn)行封閉處理,多點(diǎn)的路徑閉合后會(huì)形成特定的形狀。在畫布中,使用closePath()方法閉合路徑。例如下面的示例代碼片段,用于繪制一條L形的線。
var context = document.getElementById("cas").getContext('2d'); context.moveTo(10,10);//定義初始位置 context.lineTo(10,100);//定義連線端點(diǎn) context.lineTo(100,100);//定義連線端點(diǎn) context.strokeStyle='#00f'; context.stroke();//定義描邊
運(yùn)行示例代碼,效果如圖3所示。
圖 3 繪制線
圖3所示,通過線可以繪制一個(gè)L形字母,當(dāng)我們在第4行代碼和第5行代碼之間添加closePath()方法,具體代碼如下。
context.closePath()//閉合路徑
此時(shí)刷新頁面,路徑就會(huì)閉合,變?yōu)橐粋€(gè)直角三角形,如圖4所示。
圖 4 閉合路徑
猜你喜歡:
HTML5新增form屬性有哪些功能?具體應(yīng)該怎樣操作?