首頁(yè)技術(shù)文章正文

什么是路徑?重置路徑和閉合路徑應(yīng)該怎樣操作?

更新時(shí)間:2021-03-31 來(lái)源:黑馬程序員 瀏覽量:

1577370495235_學(xué)IT就到黑馬程序員.gif


在畫(huà)布中繪制的所有圖形都會(huì)形成路徑,通過(guò)初始位置和連線端點(diǎn)便會(huì)形成一條繪制路徑。路徑需要通過(guò)路徑狀態(tài)進(jìn)行分割或閉合,來(lái)產(chǎn)生不同的路徑樣式。路徑的狀態(tài)包括重置路徑和閉合路徑兩種,具體介紹如下。

1. 重置路徑

在同一畫(huà)布中,我們添加再多的連線端點(diǎn)也只能有一條路徑,如果想要開(kāi)始新的路徑,就需要使用beginPath()方法,當(dāng)出現(xiàn)beginPath()即表示路徑重新開(kāi)始。示例代碼如下。

 <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è)置線條顏色

由于兩條線在同一路徑中,因此第一條線并沒(méi)有顯示預(yù)期的藍(lán)色,而是被紅色覆蓋。想要讓線顯示不同的顏色,就需要對(duì)路徑進(jìn)行分割。在第13行代碼和第14行代碼之間添加以下代碼。

context.beginPath();//重置路徑

運(yùn)行示例代碼,效果如圖2所示。

線的路徑

圖2 設(shè)置線條顏色

2. 閉合路徑

閉合路徑就是將我們繪制的開(kāi)放路徑,進(jìn)行封閉處理,多點(diǎn)的路徑閉合后會(huì)形成特定的形狀。在畫(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所示,通過(guò)線可以繪制一個(gè)L形字母,當(dāng)我們?cè)诘?行代碼和第5行代碼之間添加closePath()方法,具體代碼如下。

context.closePath()//閉合路徑

此時(shí)刷新頁(yè)面,路徑就會(huì)閉合,變?yōu)橐粋€(gè)直角三角形,如圖4所示。

線的路徑

圖 4 閉合路徑




猜你喜歡:

HTML5新增form屬性有哪些功能?具體應(yīng)該怎樣操作?

網(wǎng)頁(yè)設(shè)計(jì)中如何創(chuàng)建和使用畫(huà)布?

HTML5畫(huà)布中線的樣式是怎樣設(shè)置的?    

黑馬程序員HTML&JS+前端培訓(xùn)

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!