【前端开发】Html5：canvas

《绘制方法》

1. clecrRect（left,top,width,height）：清除制定矩形区域
2. fillRect（left,top,width,height）：绘制矩形，并以fillStyle填充
3. fillText（text,x,y）：绘制文字
4. strokeRect（left,top,width,height）：绘制矩形，以strokeStyle绘制边界
5. beginPath（）：开启路径的绘制,重置path为初始状态
6. closePath（）：绘制路径path结束，它会绘制一个闭合的区间，添加一条起始位置到当前坐标的闭合曲线
7. moveTo（x，y）：设置绘图其实坐标
8. lineTo(x，y)：绘制从当前其实位置到x，y直线
9. fill（），stroke（），clip（）：在完成绘制的最后的填充和边界轮廓，剪辑区域
10. arc（）：绘制弧,圆心位置、起始弧度、终止弧度来指定圆弧的位置和大小
11. rect（）：矩形路径
12. drawImage（Imag img）：绘制图片

drawImage() 方法有 3 个变形。第一个变形把整个图像复制到画布，将其放置到指定点的左上角，并且将每个图像像素映射成画布坐标系统的一个单元。第二个变形也把整个图像复制到画布，但是允许您用画布单位来指定想要的图像的宽度和高度。第三个变形则是完全通用的，它允许您指定图像的任何矩形区域并复制它，对画布中的任何位置都可进行任何的缩放
drawImage(image, x, y)
drawImage(image, x, y, width, height)
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,destX, destY, destWidth, destHeight)

13. quadraticCurveTo（）：二次样条曲线路径,参数两个控制点
14. bezierCurveTo（）：贝塞尔曲线，参数三个控制点
15. createImageData,getImageData，putImageData：为Canvas中像素数据，ImageData为记录width、height、和数据 data，其中data为我们色素的记录为argb，所以数组大小长度为widthheight4，顺序分别为rgba。getImageData为获取矩形区域像素，而putImageData则为设置矩形区域像素