-
未登录
热门文章
本小节我们学习如何绘制折线。
绘制线段上一小节我们已经学过了，利用 moveTo、lineTo、stroke 这三个方法就可以做到。 那我们如果要画一条折线怎么画呢？答案就是用多次 lineTo 就可以了。
先看整体案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xx网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>
运行结果：
我们将上面的例子拆分讲解：
获取 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()
到这里，我们就完成了一条折线的绘制。
本小节我们学习了如何绘制折线线段，下一节我们将学习如何绘制多条折线线段。