HTML5新增的标签元素，用于在网页前端手冻绘图。其实<canvas>本身不具有绘图能力，实质上它只是一个空白的矩形区域，绘图工作需要用JavaScript获取到DOM元素来操作完成。
<canvas id="myCanvas" width="200" height="200"></canvas> >>>>>>>> 200px*200px 的空白区域
var canvasDom = document.getElementById("myCanvas") >>>>>>>> 获取canvas元素
var cxt = canvasDom.getContext("2d"); >>>>>>>> 返回一个用于在画布上绘图的环境
cxt对象拥有各种属性和方法，比如：
fillStyle：填充颜色；
fillRect(arg1,arg2,arg3,arg4)：绘制矩形，坐标（arg1,arg2）开始，大小为arg3*arg4；
createLinearGradient(arg1,arg2,arg3,arg4)：创建线性的渐变对象，用于填充矩形、圆形、线条、文本。渐变开始坐标（arg1,arg2），结束坐标（arg3,arg4）
beginPath()：开始一条路径，或重置当前的路径
开始绘制：moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()
arc(x,y,r,sAngle,eAngle,[,counterclockwise])：坐标（x，y），半径r，起始角sAngle，结束角eAngle，可选参数counterclockwise表示绘图方向
closePath() ：创建从当前点到开始点的路径
stroke()：绘制出通过 moveTo() 和 lineTo() 方法定义的路径
drawImage()：在画布上绘制图像、画布或视频
高阶：使用canvas绘制图片的封装
class Canvas {
constructor (config = {}) {
//创建canvas画布，大小为bgWidth*bgHeight
this.canvas = document.createElement('canvas');
this.canvas.width = config.bgWidth;
this.canvas.height = config.bgHeight;
this.ctx = this.canvas.getContext('2d');
}
// 单张画图到画布上
async run(config) {
// images是HTMLImageElement元素，而非链接地址
const image = await getImage(config.src);
this.ctx.drawImage(image, config.x, config.y, config.width, config.height);
}
async run2(img1, img2) {
const images = [img1, img2];
const imgSrcs = images.map(({ src }) => getImage(src));
const imgEles = await Promise.all(imgSrcs);
imgEles.map((ele, i) => {
if (ele) {
const { x = 0, y = 0, width = 0, height = 0 } = images[i];
this.ctx.drawImage(ele, x, y, width, height);
}
});
