亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

繪制折線

1. 前言

本小節我們學習如何繪制折線。

2. 繪制折線

繪制線段上一小節我們已經學過了，利用 moveTo、lineTo、stroke 這三個方法就可以做到。 那我們如果要畫一條折線怎么畫呢？答案就是用多次 lineTo 就可以了。

先看整體案例：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕課網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. 總結

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