绘制直线
最后更新于：2022-04-02 03:28:40
[TOC]
## 绘制直线
### 方法
```
beginPath()
新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径
moveTo(x, y)
把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。
lineTo(x,y)
绘制一条从当前位置到指定坐标(x,y)的直线
closePath()
闭合路径之后，图形绘制命令又重新指向到上下文中
stroke()
通过线条来绘制图形轮廓
fill()
通过填充路径的内容区域生成实心的图形
```
### 实例
绘制长方形
```
var draw=()=>{
let canvas = document.querySelector("#tutorial");
if(!canvas.getContext)return;
/** * @type CanvasRenderingContext2D */
let ctx = canvas.getContext("2d");
// style 必须写在前面
ctx.strokeStyle="rgb(200,0,0)"
ctx.fillStyle="rgb(200,0,0)"
ctx.beginPath()
ctx.moveTo(10,10)
ctx.lineTo(100,10)
ctx.lineTo(100,100)
ctx.lineTo(10,100)
ctx.closePath()
ctx.stroke()
ctx.fill()
}
```
';