亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

水車_ · 更新于 2021-02-23

繪制虛線（螞蟻線）

1. 前言

canvas 繪制路徑時默認使用的是實線(solid)，本小節我們學習在 canvas 中如何繪制虛線。canvas 中提供了一個設置虛線樣式的方法 setLineDash()。

2. 什么是虛線？

首先大家要理解的是，虛線的最小組成單元是一段空白加上一段實線，整條虛線就是由這樣的最小單元重復組成的。

我們列舉一個例子：

假如我們要在下面這一個網格上繪制線條。

我們先繪制一條實線，它是這樣的，整條線段的方格都是填滿的。

如果是虛線條，就把線段的一部分擦除掉，當然，在 canvas 中這個擦除不是毫無規律的，而是要遵守下面的規則。

  1. 起始必須是實線。
  2. 實線和空白交替出現。

我們如果按實線和空白相等來擦除就是這樣的效果：

在 canvas 中，想要上面的效果，我們只需要給 setLineDash() 方法賦值一個 [1,1] 這樣的參數就可以了。

3. setLineDash() 方法

語法：

void ctx.setLineDash(segments);

參數：

參數 說明
segments 一個數組，一組描述交替繪制線段和間距（坐標空間單位）長度的數字。

segments 是一個數組，而且必須是一個偶數長度的數組，canvas 在執行 setLineDash 時，會判斷當前數組長度是否為偶數，如果不是，則會自動復制一份當前數組中的數據，然后追加到數組中。
例如：[1, 2, 3] 會變成 [1, 2, 3, 1, 2, 3]。

上面這個例子就是我們設定了參數 segments 數組為 [1,1] 后繪制的效果。

如果我們設置參數 segments 數組為 [1,2] 的話，就會變成這樣：

如果我們設置參數 segments 數組為奇數個數，比如 [1,2,3] ，canvas 會發現是一個奇數長度的數組，于是它就會把數組復制一遍變成 [1,2,3,1,2,3]，于是就會繪制成下面這樣：

3.1 整體案例

我們上面講到的內容為了方便理解，我們用了1，2，3這樣的長度來表示，我們現在來看參數是 [10,20,30] 的完整的案例。

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕課網Wiki</title>
    <style>
        #imooc{
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="imooc">您的瀏覽器不支持 HTML5 canvas 標簽</canvas>
    <script>
		const canvas = document.getElementById('imooc');
		canvas.width=300
		canvas.height=100
		const ctx = canvas.getContext('2d');
       
       
		strokeDottedLine(); 
		strokeGridding(ctx);

		// 繪制虛線
		function strokeDottedLine(){
			ctx.beginPath();
			ctx.setLineDash([10,20,30]) // 設置虛線
			ctx.strokeStyle="#456795"
			ctx.lineWidth=10;
			ctx.moveTo(0,45);
			ctx.lineTo(300,45);
			ctx.stroke();
		}

		// 繪制網格
		function strokeGridding(){
		    ctx.lineWidth=1;
		    ctx.strokeStyle="#ccc";
		    ctx.setLineDash([])  // 這里必須再設置回默認狀態
		    for(let i=0; i<300; i+=10){
		        ctx.beginPath();
		        ctx.moveTo(i, 0);
		        ctx.lineTo(i, 300);
		        ctx.stroke();
		
		        ctx.beginPath();
		        ctx.moveTo(0,i);
		        ctx.lineTo(300, i);
		        ctx.stroke();
		    }
		}
	</script>
<body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

在案例中，我們使用了封裝函數繪制網格。

運行結果：

4. 方法整理

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

4.1 setLineDash()方法

setLineDash 方法作用是設置線條樣式。

變量說明：

變量名 類型 是否必須 說明
segments Array 是 一個數組，一組描述交替繪制線段和間距（坐標空間單位）長度的數字。

5. 總結

本小節我們主要學習了利用 setLineDash 方法設定虛線的樣式，本小節主要是理解它的參數的規律，以及參數對線條樣式的影響。這里需要說明傳入的數組的長度是沒有限制的，數組偶數下標代表實線長度，奇數下標代表空白長度。