绘制的坐标轴
既然我们已经能够获取到我们具体的画布了，那我们是不是开始绘制了呀。
先等等，我们首先先来分析一个问题，就是我们绘制图形的时候，以这个一个区域，我们应该从哪里开始，设置的数值又应该从哪里开始呢？这时候你就应该去想一想，是不是存在这么一个坐标轴，可以根据这个坐标轴来书写我们的数值呢？
请注意，横轴向右是正，纵轴向下是正
绘制直线
我们既然要画一条直线，我们是不是至少应该有这么几个条件呢？
- 线的起点
- 线的终点
- 线的颜色
- 线的宽度
所以我们接下来，就需要开始我们的代码书写了。
我们该如何去进行绘制呢？
我们需要一些工具，需要具体的方法。
| 方法 | 说明 |
| beginPath() | 开始定义路径 |
| closePath() | 关闭前面定义的路径 |
| moveTo(float x,float y) | 把 canvas 的当前路径的结束点移动到 x, y 对应的点 |
| lineTo(float x,float y) | 把 canvas 的当前路径从当前结束点连接到 x , y 对应的点 |
需要注意，moveTo 可以简单理解为，把当前绘制图像的起点设置为某一特定坐标，而 lineTo 则是将当前的起点和你想要设置的那个点之间连接起来。
而 beginPath 是表示开始定义路径，不会产生特殊的效果。而 closePath 除了表示关闭当前定义的路径之外，还会有一个特殊的作用，就是可以将当前绘制图形的最后一个点和我们绘制图形开始的点进行连接，这一点咱们在章节2.6 中详细去看一下。当然，如果你只需要画一条线，不去加beginPath 和 closep 你的内容实际也是可以出来的，但是推荐加上
这个时候我们可以来运行一下，看看效果是否能够出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<canvas id="canvas_1" width="1000" height="500" style="box-shadow: 0px 0px 20px black;">
当前浏览器不支持 canvas
</canvas>
</div>
</body>
<script type="text/javascript">
// 获取 canvas 元素对应的 DOM 对象
var canvas_1 = document.getElementById("canvas_1");
// 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
var ctx = canvas_1.getContext("2d");
// 打印一下，查看是否能够显示具体环境
console.log(ctx);
// 开始绘制
ctx.beginPath();
//设置绘制起点
ctx.moveTo(0,0);
//设置绘制下一个点
ctx.lineTo(700,400);
//结束绘制
ctx.closePath();
</script>
</html>
发现了什么？我们的图形什么都没有出来呀
效果没出来，只是因为 你已经把你的画笔的颜料，要画什么样的线条，全部都想好了，可是你往你的画布上绘画了么？
没有对吧，所以咯，我们还需要有其他的方法去进行配合
| - | - |
|---|---|
| fill() | 填充 canvas 当前路径 |
| stroke() | 填充 canvas 当前路径绘制边框 |
这个时候我们添加上我们的 stroke() 之后，我们就发现我们的线条出现了。
可是这条线一直是灰色的呀，好丑，我们想要自己去修改我们的线，该怎么做呢？
| - | - |
|---|---|
| fillStyle() | 设置填充 canvas 路径所使用的填充风格 |
| strokeStyle() | 设置绘制 canvas 路径的填充风格 |
他们两个都支持三个属性值。
- 符合颜色格式的字符串值，表示使用纯色填充
- CanvasGradient，表明使用渐变填充
- CanvasPattern，表明使用位图填充
这几个值，咱们在后续的课程中会去详细说明，在当前不去做更多阐述。
除此之外，我们还可以设置一下线的宽度
| - | - |
|---|---|
| lineWidth() | 设置笔触线条的宽度 |
绘制三角形
我们已经创建了这一条线段，那么我们平常开发中不会仅仅让你去绘制一条线吧，最起码我们需要会绘制出一个小的三角形吧。
这时候我们就需要再去绘制两条线了。
怎么去添加线呢？lineTo对吧。
这个时候我们再去绘制一条线。
-
//设置绘制起点
-
ctx.moveTo(100,100);
-
-
//设置绘制下一个点
-
ctx.lineTo(700,400);
-
-
//设置绘制下一个点
-
ctx.lineTo(400,100);
