绘制多条线段

发布时间：2023-05-24 14:12:34 所属栏目：教程来源：

导读：如果我们要绘制多条折线，应该怎么做呢？这一小节我们就来画三条折线，为了区分三条折线，我们会用上一节学习的 strokeStyle 属性来给线段设定不同的颜色，本节还将学习一个新的属性 linewidth ，该属性作用为设置线

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

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

先看一个整体案例：

<!DOCTYPE html>
<html>
<head>
   <Meta 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.strokeStyle="red";
       ctx.linewidth=; //设置线段宽度为4px
       ctx.stroke();

       //绘制第二条线段
       ctx.moveto(,);
       ctx.lineto(,);
       ctx.lineto(,);
       ctx.strokeStyle="green"
       ctx.linewidth=; //设置线段宽度为5px
       ctx.stroke();

       //绘制第三条线段
       ctx.moveto(,);
       ctx.lineto(,);
       ctx.lineto(,);
       ctx.strokeStyle="blue"
       ctx.linewidth=; //设置线段宽度为6px
       ctx.stroke();

   </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.strokeStyle="red";
ctx.linewidth=4; //设置线段宽度为4px
ctx.stroke();
绘制第二条折线，折线的颜色为绿色 (green)，折线的宽度为 5px。

ctx.moveto(10,30);
ctx.lineto(100,70);
ctx.lineto(200,30);
ctx.strokeStyle="green"
ctx.linewidth=5; //设置线段宽度为5px
ctx.stroke();
绘制第三条折线，折线的颜色为蓝色 (blue)，折线的宽度为 6px。

ctx.moveto(10,50);
ctx.lineto(100,100);
ctx.lineto(200,50);
ctx.strokeStyle="blue"
ctx.linewidth=6; //设置线段宽度为6px
ctx.stroke();

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

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!