一、canvas绘图步骤：
1.建立canvas画布；
<canvas id="canvas" width="700" height="700"></canvas>
2.通过canvas画布获取上下文对象，即画笔；
let canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
3.设置画笔颜色；
ctx.fillStyle = "red";
4.设置图形形状；
ctx.fillRect(100,100,300,200);
5.绘制图形。
二、canvas:画布的坐标系和栅格：
1.坐标系是二维直角坐标系，由x轴和y轴组成；
2.横向x轴，越往右越大；竖向y轴，越往下越大；
3.以像素的宽高为基底；
4.下图的四个格子，就是栅格（一堆像素）：每一个格子就是一个像素，像素具有rgba数据；
5.像素的数量等于canvas画布的宽度乘以高度。
三、矩形的绘制方法：
填充矩形方法：fillRect(x,y,w,h)
描边矩形方法：strokeRect(x,y,w,h)
清理矩形方法：clearRect(x,y,w,h)
描边矩形：（居中描边）
let canvas = document.querySelector("#canvas");
/**获取画笔*/
const ctx = canvas.getContext("2d"); //2维
ctx.fillStyle = "gray";
//描边宽度
ctx.lineWidth = 20;
// 描边色
ctx.strokeStyle = "pink";
ctx.fillRect(50,50,300,200);
ctx.strokeRect(50,50,300,200);
清理矩形：
// 清理矩形（不会清理全部矩形，只会清除内部矩形，外部描边不会被清除）
ctx.clearRect(50,50,300,200);
四、绘制路径的步骤：
1.开始建立路径：beginPath();
2.向路径集合中添加子路径：
[
moveTo(x,y);形状；closePath()可选，
moveTo(x,y);形状；closePath()可选，
moveTo(x,y);形状；closePath()可选，
]
3.显示路径：填充fill() , 描边stroke()
五、子路径的形状：
1.直线：lineTo(x,y);lineTo(x,y);lineTo(x,y);
let canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath(); //开始建立路径
ctx.moveTo(50,100); //向路径集合中添加子路径
ctx.lineTo(200,100);
ctx.lineTo(250,50); // 追加lineTo 变成折线
ctx.closePath(); //路径闭合
ctx.stroke(); //描边
2.圆弧：arc(x,y，半径，开始弧度，结束弧度，方向）
let canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
ctx.lineWidth = 4;
ctx.beginPath();
// 360度 = Math.PI*2 ; 1度 = Math.PI*2 / 360度
// ctx.arc(100,100,50,0,Math.PI*3/2);
ctx.arc(100,100,50,0,Math.PI*2);
ctx.stroke();
3.切线圆弧:arcTo(x1,y1,x2,y2,半径）
let canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50,100);
ctx.arcTo(200,100,200,200,50);
ctx.stroke();
// 直线：
ctx.beginPath();
ctx.moveTo(50,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
ctx.stroke();
4.二次贝塞尔曲线：quadraticCurveTo(cpx1,cpy1,x,y)
let canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
// 直线：
// ctx.beginPath();
// ctx.moveTo(50,100);
// ctx.lineTo(200,100);
// ctx.lineTo(200,200);
// ctx.stroke();
ctx.beginPath();
ctx.moveTo(50,100);
ctx.quadraticCurveTo(200,100,200,200);
ctx.stroke();
5.三次贝塞尔曲线：bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)
let canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
// 直线：
// ctx.beginPath();
// ctx.moveTo(50,100);
// ctx.lineTo(200,100);
// ctx.lineTo(200,200);
// ctx.lineTo(400,200);
// ctx.stroke();
ctx.beginPath();
ctx.moveTo(50,100);
ctx.bezierCurveTo(200,100,200,200,400,200);
ctx.stroke();
6.矩形：rect(x,y,w,h)
let canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(50,50,200,100)
ctx.stroke();
