Canvas 绘制直线图形

##  Canvas常见的直线图形
**在Canvas中，基本图形有两大类：**
- **直线图形**
	- 直线
	- 矩形
	- 多边形
- **曲线图形**
	- 圆形
	-弧线
	二次贝塞尔曲线
	三次贝塞尔曲线

## Canvas绘制直线
在Canvas中，线段是路径中的一种，被称之为线性路径。通过确定两点就能确定一条直线。
在Canvas中我们可以使用moveTo()、lineTo()和stroke()这几个方法配合使用来画直线。利用这几个方法，我们可以画一条直线，也可以同时画多条直线。
### `moveTo(x,y)`:
**定位画笔在画布上的位置，移动画笔到指定的坐标点x轴和y轴，该点就是新的子路径的起始点。该方法并不会从当前路径中清除任何子路径。**
### `lineTo(x,y)`:
**画一条直线到某个点。也可以理解使用直线连接当前端点和指定的坐标点(x坐标 , y坐标)。仅做路径运动，而不存在任何视觉上的绘图效果（上色、描边）**
### `stroke()`:
**沿着绘制路径的坐标点顺序绘制直线。要想看到使用moveTo()和lineTo() 绘制路径的效果，需要借助stroke()这个描边的方法。不给运动路径加stroke特效的画是不存在描边效果的，想要运动路径轨迹能有视觉效果，需要使用相应的上色/描边方法。**

***代码示例***
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      #Canvas{
        hight:300px;
        width: 300px;
        border: solid rebeccapurple 3px;
      }
    </style>
  <script>
      window.onload = function(){
          let canvasTar = document.querySelector("#Canvas")
          if(canvasTar.getContext){
             let conText = canvasTar.getContext("2d")
              conText.moveTo(25,35)
              conText.lineTo(100,150)
              conText.stroke()
          }
      }
  </script>
</head>
<body>
<canvas id="Canvas">
</canvas>
</body>
</html>
```
***效果***
![](/media/202212/2022-12-25_142640_166536.png)
## Canvas绘制矩形
在Canvas中，矩形分为2种，`空心描边矩形`和`实心填充矩形`。
### 空心描边矩形
**在Canvas中，我们可以使用`strokeStyle`属性和`strokeRect()`方法配合使用来画一个描边矩形。**
- strokeStyle属性值可以是颜色值、渐变色、图案其中的任何一个,且必须在strokeRect()之前定义，否则strokeStyle属性无效。
- strokeRect()方法需要传入四个参数分别为x,y,width，height

| 参数 | 描述 |
| --- | --- |
| x | 矩形左上角的 x 坐标。 |
| y | 矩形左上角的 y 坐标。 |
| width | 矩形的宽度，以像素计。 |
| height | 矩形的高度，以像素计。 |

***代码示例***
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      #Canvas{
        hight:300px;
        width: 300px;
        border: solid rebeccapurple 3px;
      }
    </style>
  <script>
      window.onload = function(){
          let canvasTar = document.querySelector("#Canvas")
          if(canvasTar.getContext){
             let conText = canvasTar.getContext("2d")
              conText.strokeStyle = "blue"
              conText.strokeRect(20,30,80,70)
          }
      }
  </script>
</head>
<body>
<canvas id="Canvas">
</canvas>
</body>
</html>
```
**效果**
![](/media/202212/Snipaste_2022-12-25_14-49-43_20221225151239963351.png)

### 实心填充矩形
在Canvas中，我们可以使用fillStyle属性和fillRect()方法配合使用来画一个填充矩形。
fillStyle属性跟strokeStyle属性一样。fillStyle属性也必须在fillRect()方法之前定义，否则fillStyle属性无效。
fillRect()方法传入四个参数x，y，width， height
**代码示例**
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      #Canvas{
        hight:300px;
        width: 300px;
        border: solid rebeccapurple 3px;
      }
    </style>
  <script>
      window.onload = function(){
          let canvasTar = document.querySelector("#Canvas")
          if(canvasTar.getContext){
             let conText = canvasTar.getContext("2d")
              conText.fillStyle = "blue"
              conText.fillRect(20,30,80,70)
          }
      }
  </script>
</head>
<body>
<canvas id="Canvas">
</canvas>
</body>
</html>
```
**绘图结果**
![](/media/202212/2022-12-25_153550_246385.png)