绘制折线

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

导读：绘制线段上一小节我们已经学过了，利用 moveto、lineto、stroke 这三个方法就可以做到。那我们如果要画一条折线怎么画呢？答案就是用多次 lineto 就可以了。

先看整体案例：

<!DOCTYPE html>
<html>
<head>

绘制线段上一小节我们已经学过了，利用 moveto、lineto、stroke 这三个方法就可以做到。那我们如果要画一条折线怎么画呢？答案就是用多次 lineto 就可以了。

先看整体案例：

<!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.stroke();
   </script>
</body>
</html>
运行结果：

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

获取 canvas 的渲染上下文。

const canvas = document.getElementById('imooc');
const ctx = canvas.getContext('2d');
将笔触移动到 (100, 100) 这个坐标点。

ctx.moveto(100, 100)
路径绘制到 (200, 200) 这个点，再绘制到 (300, 100) 这个点，这里路径走势是从 (100, 100) 的起点连到 (200, 200) 这个点，然后从 (200, 200) 这个点再连到 (300, 100) 这个点。

ctx.lineto(200, 200)
ctx.lineto(300, 100)
开始描边。

ctx.stroke()
到这里，我们就完成了一条折线的绘制。

（编辑：汽车网）

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