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

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

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

在畫布中繪制的所有圖形都會(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)色，而是被紅色覆蓋。想要讓線顯示不同的顏色，就需要對(duì)路徑進(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所示。

線的路徑