HTML5 Canvas是HTML5中一个新的元素，它允许脚本（通常使用JavaScript）动态地在网页上绘制图形。结合JavaScript，Canvas为网页图形提供了丰富多彩的编程接口，使开发者能够实现更复杂的效果和动画。使用Canvas绘制线条是网页设计和游戏开发中的一项基础技能，也是数据可视化、图像处理等多个领域中不可或缺的技术点。
要绘制线条，我们需要创建一个Canvas元素，并通过JavaScript获取其上下文环境。在HTML页面中，我们使用<canvas>标签来定义一个Canvas区域。例如：
```html
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
```
这段代码创建了一个宽度为200像素，高度为100像素的画布，并通过CSS设置了一像素宽的黑色边框。如果用户浏览器不支持HTML5 Canvas，那么会显示提示文本"Your browser does not support the HTML5 canvas tag."。
接下来，在JavaScript中，我们需要获取到这个Canvas元素并使用它的2D绘图上下文（context），通常是使用`getContext("2d")`方法来获取。一旦我们有了这个2D上下文，就可以开始绘制了。
在Canvas中绘制线条，我们会用到两个关键的函数：`moveTo()`和`lineTo()`。这两个函数都接受两个参数，分别代表x和y坐标。
- `moveTo(x, y)`函数用于设置Canvas的绘图起点。这个函数会将画笔移动到指定的坐标位置，但不绘制任何东西，就像拿起画笔移动到新的位置一样。
- `lineTo(x, y)`函数用于绘制线条，它的作用是将画笔从当前位置移动到新指定的坐标位置，并在两者之间绘制一条直线。如果是在`moveTo()`函数之后使用，则线条从`moveTo()`指定的位置开始绘制。
举例来说：
```javascript
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(10, 10); // 移动到坐标(10, 10)的位置
ctx.lineTo(150, 50); // 从当前位置绘制一条线到坐标(150, 50)
ctx.lineTo(10, 50); // 继续绘制一条线到坐标(10, 50)
ctx.stroke(); // 最后调用stroke()方法实际绘制出线条
```
在这个例子中，Canvas首先将画笔移动到(10, 10)的位置，然后绘制一条线到(150, 50)，再绘制一条线到(10, 50)。由于Canvas的坐标系原点(0,0)位于左上角，所以x坐标向右增加，y坐标向下增加。
需要注意的是，绘制完成这些步骤后，并不会立即在Canvas上显示任何东西，我们需要调用`stroke()`方法来实际绘制这些线条。`stroke()`方法会根据当前的绘图状态（包括线条颜色、宽度等）来绘制路径上所有线条。
以上就是使用JavaScript和HTML5 Canvas来绘制线条的基础知识。通过这个例子，我们可以了解到Canvas上下文环境的获取、移动起点、绘制线条以及如何使绘制生效。掌握了这些基础，我们就可以进一步学习Canvas的其他高级功能，比如绘制矩形、圆形、文本、图像，以及使用变换、样式和动画等复杂技术。这些技术的结合使用，可以让我们在网页上制作出丰富多彩的图形效果。
