繪制多條線段

1. 前言

本小節(jié)我們學(xué)習(xí)繪制多條折線的方法。

2. 繪制多條折線

如果我們要繪制多條折線，應(yīng)該怎么做呢？這一小節(jié)我們就來畫三條折線，為了區(qū)分三條折線，我們會用上一節(jié)學(xué)習(xí)的 strokeStyle 屬性來給線段設(shè)定不同的顏色，本節(jié)還將學(xué)習(xí)一個新的屬性 lineWidth ，該屬性作用為設(shè)置線段寬度。

首先，我們分別繪制三條折線。

先看一個整體案例：

運行結(jié)果：

我們將上面的例子拆分講解：

1. 獲取 canvas 的渲染上下文。

   const canvas = document.getElementById('imooc');
   const ctx = canvas.getContext('2d');
   

2. 繪制第一條折線，折線的顏色為紅色 (red)，折線的寬度為 4px。

   ctx.moveTo(10,10);
   ctx.lineTo(100,50);
   ctx.lineTo(200,10);
   ctx.strokeStyle="red";
   ctx.lineWidth=4;       //設(shè)置線段寬度為4px
   ctx.stroke();
   

3. 繪制第二條折線，折線的顏色為綠色 (green)，折線的寬度為 5px。

   ctx.moveTo(10,30);
   ctx.lineTo(100,70);
   ctx.lineTo(200,30);
   ctx.strokeStyle="green"
   ctx.lineWidth=5;       //設(shè)置線段寬度為5px
   ctx.stroke();
   

4. 繪制第三條折線，折線的顏色為藍色 (blue)，折線的寬度為 6px。

   ctx.moveTo(10,50);
   ctx.lineTo(100,100);
   ctx.lineTo(200,50);
   ctx.strokeStyle="blue"
   ctx.lineWidth=6;       //設(shè)置線段寬度為6px
   ctx.stroke();
   

通過運行上面的案例，我們有沒有發(fā)現(xiàn)一個問題？那就是繪制出來的線段都是一個顏色，而且線段的寬度都是一樣的，都是最后設(shè)置的藍色和 6px 寬，這個是什么原因呢？這里我們需要明白一個原理就是：canvas 是基于狀態(tài)的繪制。

什么是“canvas 是基于狀態(tài)的繪制？”

我們用上面的案例來說明，上面案例中，每次使用 stroke() 時，都會把之前已經(jīng)繪制的內(nèi)容重新繪制一遍，例如開始 stroke() 第二條折線的時候，canvas 會把第一條折線重新再繪制一遍，開始 stroke() 第三條折線的時候，會把第一條折線和第二條折線再重新繪制一遍，之前繪制的折線不是消失了，而是被遮擋了。

因為 canvas 是基于狀態(tài)的繪制，所以我們這里看到了三條一樣的折線，那么我們想要繪制不一樣的折線應(yīng)該怎么做呢？這里就需要用到新的方法 beginPath()，從字面意思我們可以知道，它的作用是重新開始一個路徑。

下面我們來看一個案例：

運行結(jié)果：

我們將上面的例子拆分講解：

1. 獲取 canvas 的渲染上下文。

   const canvas = document.getElementById('imooc');
   const ctx = canvas.getContext('2d');
   

2. 繪制第一條折線，折線的顏色為紅色 (red)，折線的寬度為 4px，第一個 beginPath 是可以省略的，因為 canvas 默認(rèn)開始就是一個新的路徑。

   ctx.beginPath()       //開始一個新路徑（第一個可以省略）
   ctx.moveTo(10,10);
   ctx.lineTo(100,50);
   ctx.lineTo(200,10);
   ctx.strokeStyle="red";
   ctx.lineWidth=4;
   ctx.stroke();
   

3. 繪制第二條折線，開始之前增加了 beginPath 方法，折線的顏色為綠色 (green)，折線的寬度為 5px。

   ctx.beginPath()
   ctx.moveTo(10,30);
   ctx.lineTo(100,70);
   ctx.lineTo(200,30);
   ctx.strokeStyle="green"
   ctx.lineWidth=5; 
   ctx.stroke();
   

4. 繪制第三條折線，開始之前增加了 beginPath 方法，折線的顏色為藍色 (blue)，折線的寬度為 6px。

   ctx.beginPath()
   ctx.moveTo(10,50);
   ctx.lineTo(100,100);
   ctx.lineTo(200,50);
   ctx.strokeStyle="blue"
   ctx.lineWidth=6;
   ctx.stroke();
   

到這里我們就完成了多條折線的繪制。

3. 路徑方法整理

本小節(jié)中我們使用到一個新的方法。

3.1 beginPath(x, y)

beginPath() 方法主要作用是開始一個新的路徑，它是下次 stroke 的起始位置，下次 stroke 的時候就不會重新繪制 beginPath 之前的內(nèi)容了。

4. 路徑屬性整理

本小節(jié)中，我們只用到了一個屬性，就是 lineWidth。

4.1 lineWidth

lineWidth 屬性設(shè)置線條的寬度，如果不設(shè)置，默認(rèn)為1px。

5. 總結(jié)

本小節(jié)我們學(xué)習(xí)了如何繪制多條折線線段，講解了什么是“canvas 是基于狀態(tài)的繪制”，還學(xué)習(xí)到了一個新的方法 beginPath() 和一個新的屬性 lineWidth，下一節(jié)我會帶領(lǐng)大家學(xué)習(xí)矩形的繪制。