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

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

繪制線段

1. 前言

線段的繪制在 canvas 里應(yīng)該是最基礎(chǔ)的一個操作，很多復(fù)雜的圖案就是由最簡單的線段組成的，所以我們的課程就從繪制線段開始。

2. 繪制線段

開始之前，我先拿現(xiàn)實生活中畫一條線段的流程來類比我們在 canvas 中繪制線段。

在現(xiàn)實中，我們?nèi)绾稳ギ嬕粭l線段呢？我們暫且就按下面的流程來做一遍：

  • 拿到一張白紙（畫布）；
  • 鉛筆移動到起點；
  • 開始描線到終點（類似于素描中的打線）；
  • 選擇一種有顏色的畫筆；
  • 開始描邊（畫出輪廓線）。

在 canvas 中，我們也是按這個流程來繪制一條線段的。

先看整體案例：

實例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!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"></canvas>
	
	<script>
		// 拿到一張白紙
		const canvas = document.getElementById('imooc');
		const ctx = canvas.getContext('2d');
		
		// 打線筆移動到起點
		ctx.moveTo(10,10);
		
		// 開始描線到終點
		ctx.lineTo(100,50);
		
		// 選擇綠色的畫筆 
		ctx.strokeStyle="green";
		
		// 開始用畫筆描邊
		ctx.stroke();
	</script>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結(jié)果：

我們將上面的例子類比現(xiàn)實中畫線的流程拆分講解：

  1. 拿到一張白紙類比我們獲取到 canvas 的渲染上下文。

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

  2. 我們開始鉛筆打線，先把鉛筆移動到 (100,100) 這個點，這里使用的方法是：moveTo(x,y)，參數(shù)為起點坐標(biāo)。

    ctx.moveTo(100, 100)

  3. 我們用鉛筆從起點畫一個路徑到終點，也就是 (200,300) 這個點，這里使用的方法是：lineTo(x, y)，參數(shù)為終點坐標(biāo)。

    ctx.lineTo(200,300)

  4. 選擇一個畫筆，這里我們設(shè)定為綠色的畫筆，這是使用了 strokeStyle 屬性，這里需要注意屬性和方法的區(qū)別，直觀的理解就是：屬性是一個變量，方法是一個函數(shù)。

    ctx.strokeStyle = "green"

  5. 開始用畫筆描邊，這里使用的方法是：stroke()，這個方法沒有參數(shù)。

    ctx.stroke()

到這里，我們就完成了一條線段的繪制。

3. 線段方法整理

本小節(jié)中我們使用到了三個方法，都是和繪制線段相關(guān)的。

3.1 moveTo(x, y)

moveTo 方法主要作用是把畫筆路徑移動到畫布中的指定點，它不會創(chuàng)建線條。通過字面意思我們也可以知道，“move: 移動”，“to: 到… 地方”，整體意思就是移動到某個坐標(biāo)。

參數(shù)說明：

變量名 類型 是否必須 說明
x Number 是 canvas 畫布上相對于原點所繪制的矩形的左上角的 X 坐標(biāo)。
y Number 是 canvas 畫布上相對于原點所繪制的矩形的左上角的 Y 坐標(biāo)。

3.2 lineTo(x, y)

lineTo 方法主要作用是打線到指定點，它不會創(chuàng)建線條。通過字面意思我們也可以知道，“l(fā)ine: 路線”，“to: 到… 地方”，整體意思就是路線引到某個坐標(biāo)。

參數(shù)說明：

變量名 類型 是否必須 說明
x Number 是 canvas 畫布上相對于原點所繪制的矩形的左上角的 X 坐標(biāo)。
y Number 是 canvas 畫布上相對于原點所繪制的矩形的左上角的 Y 坐標(biāo)。

3.3 stroke()

stroke 方法主要作用是繪制出通過 moveTo() 和 lineTo() 方法定義的路徑，如果沒有定義畫筆的顏色，那么會默認(rèn)使用黑色來繪制。

4. 線段屬性整理

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

4.1 strokeStyle

strokeStyle 屬性設(shè)置描邊的顏色，它的值和 css 中設(shè)定顏色一樣。

ctx.strokeStyle = "blue"
ctx.strokeStyle = "#cccccc"
ctx.strokeStyle = "#ccc"
ctx.strokeStyle = "rgb(200, 200, 200)"
ctx.strokeStyle = "rgba(200, 200, 200, 0.5)"
ctx.strokeStyle = "hsl(0, 100%, 50%)"
ctx.strokeStyle = "hsla(0, 100%, 50%, 0.5)"

以上 7 種設(shè)定描邊顏色的寫法都是支持的。

5. 總結(jié)

本小節(jié)我們學(xué)習(xí)了如何繪制一條線段，我們用了現(xiàn)實生活中畫一條線段的流程來做類比，我們還學(xué)習(xí)了和線段相關(guān)的三個新的方法和一個屬性。下一節(jié)我會帶領(lǐng)大家學(xué)習(xí)繪制多條線段的方法。