👋因为在B站看到一个小demo是基于canvas写的，非常喜欢，然后上掘金大数据又给我推了 《Canvas 从入门到劝朋友放弃（图解版）》，就像上手一下canvas，本来不想写笔记的，因为《Canvas 从入门到劝朋友放弃（图解版）》自己看了一下挺全的，但本着输入要有输出，所以就有了这篇文章
参考文章：
https://juejin.cn/post/7116784455561248775>
简单了解一下Canvas
简单上手
1. 快速上手——画条直线
<body>
<!--1.创建 canvas 元素-->
<canvas id="line" width="300" height="200" style="border: 1px solid #ccc"></canvas>
<script>
//2. 获取canvas对象
const cnv = document.getElementById("line")
//3. 获取 canvas 上下文环境对象
const cxt = cnv.getContext("2d")
//4. 绘制图形
cxt.moveTo(100,100)//起点坐标
cxt.lineTo(200,100)//终点坐标
cxt.stroke()// 将起点和终点连接起来
</script>
</body><canvas>元素有一个叫做getContext()的方法，这个方法是用来获得渲染上下文和它的绘画功能。canvas元素提供了width和height两个属性，可设置它的宽高,不需要传入单位（比如 px 等）。
注意： 如果你绘制出来的图像是扭曲的，尝试用 width 和 height 属性为<canvas>明确规定宽高，而不是使用 CSS。 []()
2. 基础图形
👋在画图前，先了解一下画布栅格以及坐标空间
我们画图就是基于这个网格画的，通常来说网格中的一个单元相当于 canvas 元素中的一像素。栅格的起点为左上角（坐标为（0,0））。
👋画图的基本方法
图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。 使用路径绘制图形需要一些额外的步骤。
案例一：两条线段
<body>
<canvas id="line" width="300" height="200" style="border: 1px solid #ccc"></canvas>
<script>
const cnv = document.getElementById("line")
const cxt = cnv.getContext("2d")
cxt.moveTo(20,100)//起点坐标(x,y)
cxt.lineTo(100,50)//终点坐标
cxt.lineWidth = 5 //线的粗细
cxt.strokeStyle = 'blue'
cxt.stroke()// 将起点和终点连接起来
cxt.beginPath() // 重新开启一个路径
cxt.moveTo(100, 100)
cxt.lineTo(180, 50)
cxt.lineWidth = 4
cxt.strokeStyle = 'red'
cxt.stroke()
</script>
</body>
案例二：三角形
<body>
<canvas id="triangle" width="300" height="200" style="border: 1px solid #ccc"></canvas>
<script>
const cnv = document.getElementById("triangle")
const cxt = cnv.getContext("2d")
cxt.moveTo(50, 100)
cxt.lineTo(0, 150)
cxt.lineTo(100,150)
cxt.closePath() //使用 closePath() 方法进行闭合
cxt.stroke()
</script>
</body>
案例三：矩形
方法一：跟之前一样，确认坐标，连线，闭合
<body>
<canvas id="rectangular" width="300" height="200" style="border: 1px solid #ccc"></canvas>
<script>
const cnv = document.getElementById("rectangular")
const cxt = cnv.getContext("2d")
cxt.moveTo(50, 50)
cxt.lineTo(200, 50)
cxt.lineTo(200,150)
cxt.lineTo(50,150)
cxt.closePath() //使用 closePath() 方法进行闭合
cxt.stroke()
</script>
</body>方法二： strokeRect(x, y, width, height)绘制一个矩形的边框 （原理：有了起点，宽，高 能得到一个矩形）
- strokeStyle：设置描边的属性
- strokeRect(x, y, width, height)：(x和y是矩形左上角起点；width 和 height 是矩形的宽高）
- strokeStyle 必须写在 strokeRect() 前面，不然样式不生效。
cxt.strokeRect(50, 50, 200, 150)方法二： fillRect(x, y, width, height)绘制一个填充的矩形
cxt.fillStyle = 'pink' //填充
cxt.fillRect(50, 50, 200, 150) // fillRect(x, y, width, height)方法三： 使用rect(x, y, width, height) 生成矩形
cxt.rect(50, 50, 200, 150) // rect(x, y, width, height)
cxt.stroke()
cxt.fill()扩：clearRect(x, y, width, height)清除指定矩形区域，让清除部分完全透明。 []()
案例四：圆
绘制圆形的方法是 arc(),当然还有arcTo()，不过这个有点麻烦，我们不找麻烦😁
<br>注意：每一段圆弧的开始都调用`beginPath()`。
<canvas id="round" width="300" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
const cnv = document.getElementById('round')
const cxt = cnv.getContext('2d')
cxt.beginPath()
cxt.arc(200, 200, 80, 0, 360 * Math.PI / 180)
//cxt.arc(圆心x,圆心y,圆半径r，开始角度，结束角度，绘制方向)
cxt.closePath()
cxt.stroke()
</script>解释：
- 绘制方向（true: 逆时针; false: 顺时针），默认 false
- 角度都是以弧度为单位，
与弧度的 js 表达式：弧度=(Math.PI/180)角度**
😁总结
<br>
线：起点、终点、连线
<br>三角形：起点、第二个点、第三个点、闭合、连线
<br>矩形：起点，宽，高
<br>圆：圆心坐标，半径，开始角度，结束角度，顺时针还是逆时针
<br>简单上手之后感觉跟小学时候学的小海龟画图挺像的，
