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

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

繪制線段

1. 前言

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

2. 繪制線段

開(kāi)始之前，我先拿現(xiàn)實(shí)生活中畫一條線段的流程來(lái)類比我們?cè)?canvas 中繪制線段。

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

  • 拿到一張白紙（畫布）；
  • 鉛筆移動(dòng)到起點(diǎn)；
  • 開(kāi)始描線到終點(diǎn)（類似于素描中的打線）；
  • 選擇一種有顏色的畫筆；
  • 開(kāi)始描邊（畫出輪廓線）。

在 canvas 中，我們也是按這個(gè)流程來(lái)繪制一條線段的。

先看整體案例：

實(shí)例演示
預(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');
		
		// 打線筆移動(dòng)到起點(diǎn)
		ctx.moveTo(10,10);
		
		// 開(kāi)始描線到終點(diǎn)
		ctx.lineTo(100,50);
		
		// 選擇綠色的畫筆 
		ctx.strokeStyle="green";
		
		// 開(kāi)始用畫筆描邊
		ctx.stroke();
	</script>
</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

運(yùn)行結(jié)果：

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

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

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

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

    ctx.moveTo(100, 100)

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

    ctx.lineTo(200,300)

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

    ctx.strokeStyle = "green"

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

    ctx.stroke()

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

3. 線段方法整理

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

3.1 moveTo(x, y)

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

參數(shù)說(shuō)明：

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

3.2 lineTo(x, y)

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

參數(shù)說(shuō)明：

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

3.3 stroke()

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

4. 線段屬性整理

本小節(jié)中，我們只用到了一個(gè)屬性，就是 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)實(shí)生活中畫一條線段的流程來(lái)做類比，我們還學(xué)習(xí)了和線段相關(guān)的三個(gè)新的方法和一個(gè)屬性。下一節(jié)我會(huì)帶領(lǐng)大家學(xué)習(xí)繪制多條線段的方法。