canvas详解

　　原理

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 参考手册