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

水車(chē)_ · 更新于 2021-08-02

繪制折線

1. 前言

本小節(jié)我們學(xué)習(xí)如何繪制折線。

2. 繪制折線

繪制線段上一小節(jié)我們已經(jīng)學(xué)過(guò)了，利用 moveTo、lineTo、stroke 這三個(gè)方法就可以做到。 那我們?nèi)绻?huà)一條折線怎么畫(huà)呢？答案就是用多次 lineTo 就可以了。

先看整體案例：

實(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">您的瀏覽器不支持 HTML5 canvas 標(biāo)簽</canvas>
	
	<script>
		const canvas = document.getElementById('imooc');
		const ctx = canvas.getContext('2d');
		
		
		ctx.moveTo(10,10);
		ctx.lineTo(100,50);
		ctx.lineTo(200,10);
		
		ctx.stroke();
	</script>
</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

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

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

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

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

  2. 將筆觸移動(dòng)到 (100, 100) 這個(gè)坐標(biāo)點(diǎn)。

    ctx.moveTo(100, 100)

  3. 路徑繪制到 (200, 200) 這個(gè)點(diǎn)，再繪制到 (300, 100) 這個(gè)點(diǎn)，這里路徑走勢(shì)是從 (100, 100) 的起點(diǎn)連到 (200, 200) 這個(gè)點(diǎn)，然后從 (200, 200) 這個(gè)點(diǎn)再連到 (300, 100) 這個(gè)點(diǎn)。

    ctx.lineTo(200, 200)
ctx.lineTo(300, 100)

  4. 開(kāi)始描邊。

    ctx.stroke()

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

3. 總結(jié)

本小節(jié)我們學(xué)習(xí)了如何繪制折線線段，下一節(jié)我們將學(xué)習(xí)如何繪制多條折線線段。