绘制多条折线

本小节我们学习绘制多条折线的。

如果我们要绘制多条折线，应该怎么做呢？这一小节我们就来画三条折线，为了区分三条折线，我们会用上一节学习的 Style 来给线段设定不同的颜色，本节还将学习新的 lineWidth ，该作用为设置线段宽度。

首先，我们分别绘制三条折线。

先看整体案例：

<!DOCTYPE html>
<html>
<head>
	< charset="utf-8">
	<title>网Wiki</title>
    <style>
        #imooc{
            border:px solid #ccc;
        }
    </style>
</head>
<body>
	
	<canvas id="imooc">您的浏览器 HTML5 canvas </canvas>
	
	<script>
		const canvas = document.getElementById('imooc');
		const ctx = canvas.getContext('2d');
		
		//绘制第一条线段
		ctx.moveTo(,);
		ctx.lineTo(,);
		ctx.lineTo(,);
		ctx.Style="red";
		ctx.lineWidth=;       //设置线段宽度为4px
		ctx.();
		
		//绘制第二条线段
		ctx.moveTo(,);
		ctx.lineTo(,);
		ctx.lineTo(,);
		ctx.Style="green"
		ctx.lineWidth=;       //设置线段宽度为5px
		ctx.();
		
		//绘制第三条线段
		ctx.moveTo(,);
		ctx.lineTo(,);
		ctx.lineTo(,);
		ctx.Style="blue"
		ctx.lineWidth=;       //设置线段宽度为6px
		ctx.();
		
	</script>
</body>
</html>

运行结果：

我们将上面的例子拆分讲解：

canvas 的渲染上下文。

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

绘制第一条折线，折线的颜色为红色 (red)，折线的宽度为 4px。

ctx.moveTo(10,10);
ctx.lineTo(100,50);
ctx.lineTo(200,10);
ctx.Style="red";
ctx.lineWidth=4;       //设置线段宽度为4px
ctx.();

绘制第二条折线，折线的颜色为绿色 (green)，折线的宽度为 5px。

ctx.moveTo(10,30);
ctx.lineTo(100,70);
ctx.lineTo(200,30);
ctx.Style="green"
ctx.lineWidth=5;       //设置线段宽度为5px
ctx.();

绘制第三条折线，折线的颜色为蓝色 (blue)，折线的宽度为 6px。

ctx.moveTo(10,50);
ctx.lineTo(100,100);
ctx.lineTo(200,50);
ctx.Style="blue"
ctx.lineWidth=6;       //设置线段宽度为6px
ctx.();

通过运行上面的案例，我们有没有发现问题？那就是绘制出来的线段都是颜色，而且线段的宽度都是一样的，都是最后设置的蓝色和 6px 宽，这个是什么原因呢？这里我们需要明白原理就是：canvas 是基于状态的绘制。

什么是“canvas 是基于状态的绘制？”

我们用上面的案例来说明，上面案例中，每次使用 () 时，都会把之前已经绘制的重新绘制一遍，例如开始 () 第二条折线的时候，canvas 会把第一条折线重新再绘制一遍，开始 () 第三条折线的时候，会把第一条折线和第二条折线再重新绘制一遍，之前绘制的折线不是消失了，而是被遮挡了。

因为 canvas 是基于状态的绘制，所以我们这里看到了三条一样的折线，那么我们想要绘制不一样的折线应该怎么做呢？这里就需要用到新的 beginPath()，从字面意思我们可以知道，它的作用是重新开始路径。

下面我们来看案例：

<!DOCTYPE html>
<html>
<head>
	< charset="utf-8">
	<title>网Wiki</title>
    <style>
        #imooc{
            border:px solid #ccc;
        }
    </style>
</head>
<body>
	
	<canvas id="imooc">您的浏览器 HTML5 canvas </canvas>
	
	<script>
		const canvas = document.getElementById('imooc');
		const ctx = canvas.getContext('2d');
		
		//绘制第一条线段
		ctx.beginPath()       //开始新路径（第可以省略）
		ctx.moveTo(,);
		ctx.lineTo(,);
		ctx.lineTo(,);
		ctx.Style="red";
		ctx.lineWidth=;
		ctx.();
		
		//绘制第二条线段
		ctx.beginPath()       //开始新路径
		ctx.moveTo(,);
		ctx.lineTo(,);
		ctx.lineTo(,);
		ctx.Style="green"
		ctx.lineWidth=; 
		ctx.();
		
		//绘制第三条线段
		ctx.beginPath()       //开始新路径
		ctx.moveTo(,);
		ctx.lineTo(,);
		ctx.lineTo(,);
		ctx.Style="blue"
		ctx.lineWidth=;
		ctx.();
		
	</script>
</body>
</html>

运行结果：

我们将上面的例子拆分讲解：

canvas 的渲染上下文。

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

绘制第一条折线，折线的颜色为红色 (red)，折线的宽度为 4px，第 beginPath 是可以省略的，因为 canvas 认开始就是新的路径。

ctx.beginPath()       //开始新路径（第可以省略）
ctx.moveTo(10,10);
ctx.lineTo(100,50);
ctx.lineTo(200,10);
ctx.Style="red";
ctx.lineWidth=4;
ctx.();

绘制第二条折线，开始之前了 beginPath ，折线的颜色为绿色 (green)，折线的宽度为 5px。

ctx.beginPath()
ctx.moveTo(10,30);
ctx.lineTo(100,70);
ctx.lineTo(200,30);
ctx.Style="green"
ctx.lineWidth=5; 
ctx.();

绘制第三条折线，开始之前了 beginPath ，折线的颜色为蓝色 (blue)，折线的宽度为 6px。

ctx.beginPath()
ctx.moveTo(10,50);
ctx.lineTo(100,100);
ctx.lineTo(200,50);
ctx.Style="blue"
ctx.lineWidth=6;
ctx.();

到这里我们就完成了多条折线的绘制。

本小节中我们使用到新的。

beginPath() 主要作用是开始新的路径，它是下次的起始位置，下次的时候就不会重新绘制 beginPath 之前的了。

本小节中，我们只用到了，就是 lineWidth。

lineWidth 设置线条的宽度，如果不设置，认为1px。

本小节我们学习了如何绘制多条折线线段，讲解了什么是“canvas 是基于状态的绘制”，还学习到了新的 beginPath() 和新的 lineWidth，下一节我会带领大家学习矩形的绘制。

←绘制折线

用线条绘制图形→

绘制多条折线

您的鼓励是对我最大的支持