原理
1.canvas本身并不具备绘画能力，它本身只是一个画布，是一个容器。绘图能力是基于html5的getContext("2d")返回的CanvasRenderingContext2D对象来完成的
const canvas = document.getElementById("canvas");//获取canvas dom对象
const ctx = canvas.getContext('2d'); //获取绘图对象
注：canvas是一个二维网络，以画布左上角（0,0）为坐标原点，x轴向右延伸，y轴向下延伸。所以canvas画布中的坐标全为正数，没有负数
常用API
strokeRect(x,y,width,height):绘制无填充矩形arc(x,y,r,sAngle,eAngle,counterclockwise):绘制圆fillStyle=color|gradient|pattern:填充绘画的颜色、渐变或模式moveTo(x,y):把路径移动到画布中的指定点，不创建线条lineTo(x,y):添加一个新点stroke():绘制已定义的路径，即线条绘制fill():填充当前绘图（主要是颜色填充）drawImage(img,x,y,width,height):绘制图像scale(scalewidth,scaleheight):缩放当前绘图save():保存当前环境的状态 注：该方法的使用是将之前绘图的属性进行缓存，使之后的绘图能够独立出来restore():返回之前保存过的路径状态和属性。 注：即是消除save()的影响，让绘图回到原先的状态。beginPath(): 开始一条新的路径，该方法将消除方法调用前的绘图影响。注：通常我们在一个新的绘图前都会使用该方法，目的是杜绝之后的stroke或fill填充当前图形。closePath():创建当前点到开始点的路径，即闭合路径，常用在三角形的第3边绘制isPointInPath(x,y):判断指定的点是否在当前路径上。clearRect(x,y,width,height)：清除画布指定区域的绘图。该方法很重要，在canvas中只有该方法可以清除绘图，在重绘时常常用到。- toDataURL()：能把画布里的图案转变成base64编码格式的png
其实还有很多没有列出来，更多的大家可以参考HTML5 参考手册