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

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

繪制折線

1. 前言

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

2. 繪制折線

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

先看整體案例：

實例演示
預覽 復制
復制成功！
<!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');
		const ctx = canvas.getContext('2d');
		
		
		ctx.moveTo(10,10);
		ctx.lineTo(100,50);
		ctx.lineTo(200,10);
		
		ctx.stroke();
	</script>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結果：

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

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

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

  2. 將筆觸移動到 (100, 100) 這個坐標點。

    ctx.moveTo(100, 100)

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

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

  4. 開始描邊。

    ctx.stroke()

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

3. 總結

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