第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

繪制虛線（螞蟻線）

1. 前言

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

2. 什么是虛線？

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

我們列舉一個例子：

假如我們要在下面這一個網(wǎng)格上繪制線條。

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

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

  1. 起始必須是實線。
  2. 實線和空白交替出現(xiàn)。

我們?nèi)绻磳嵕€和空白相等來擦除就是這樣的效果：

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

3. setLineDash() 方法

語法：

void ctx.setLineDash(segments);

參數(shù)：

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

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

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

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

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

3.1 整體案例

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

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕課網(wǎng)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();
		}

		// 繪制網(wǎng)格
		function strokeGridding(){
		    ctx.lineWidth=1;
		    ctx.strokeStyle="#ccc";
		    ctx.setLineDash([])  // 這里必須再設置回默認狀態(tài)
		    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>
運行案例 點擊 "運行案例" 可查看在線運行效果

在案例中，我們使用了封裝函數(shù)繪制網(wǎng)格。

運行結(jié)果：

4. 方法整理

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

4.1 setLineDash()方法

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

變量說明：

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

5. 總結(jié)

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