canvas基本概念
1.canvas：h5新标签：表示画布（H5新出的技术）canvas标签属于媒体标签，canvas元素本身就是一张图片。图片自己的编码宽高用属性来设置，就是canvas图片的宽高就是canvas标签的width和height属性来设置。而用CSS样式来设置canvas的width和height设置的宽高是页面渲染的宽高，和图片自己编码宽高不同，渲染的放大和缩小的比例可能会导致图片失真。
2.canvas画图，就是用js代码来画图。canvas本身没有任何外观，只是在文档中创建了一块画布，当超出画布区域的图像不会显示。
3.canvas看起来和img标签一样，只是canvas只有两个可选的属性 width、heigth 属性，不给canvas设置 widht、height 属性时，则默认 width为300、height 为 150，单位都是 px。也可以使用 css 属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用 css 属性来设置canvas的宽高。
4.低版本的浏览器不能识别canvas标签，当浏览器不能识别标签时会将标签中的内容当作普通文本直接渲染在页面上。
5.canvas标签一般嵌套在div标签中，设置和父级div元素高宽相同就可避免图片渲染后造成失真。
渲染上下文
canvas会创建一个固定大小的画布，会公开一个或多个渲染上下文(就相当于画笔)，使用渲染上下文对象的方法来绘制和处理要展示的内容。（上下文对象：连接底层代码，上层语言使用这个对象可以调用底层代码封装好的函数来做业务）
画布的尺寸和坐标
画布以左上角(0, 0)为坐标原点；所有绘制的形状的位置都相对于这个原点来定位；往右为X轴的坐标不断增大；往下为Y轴的坐标不断增大。
图中蓝色方形左上角的坐标为距离左边（X 轴）x 像素，距离上边（Y 轴）y 像素，坐标为 (x,y)。
绘制形状
绘制路径 (path)
图形的基本元素是路径。
路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。
使用路径绘制图形的步骤：
1.创建路径起始点
2.调用绘制方法去绘制出路径
3.把路径封闭
4.一旦路径生成，通过描边或填充路径区域来渲染图形。
渲染上下文对象的方法和属性
方法
1.beginPath()
起始一条路径，或重置当前路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径，重新开始一条路径时画笔的颜色和线条的宽度等就可以互不相影响
2.moveTo(x, y)
把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标，不创建线条。
3.lineTo(x,y)
表示将画笔从某一个点移动到另一个点，会将之前定义的线段起点和指定的新的点连接起来绘制一条从从当前位置到指定坐标的直线；会把上一次的终点作为这一次的起点，如果上一次没有终点就没有这一次的起点。
4.closePath()
把起点和终点连接起来，闭合路径之后，图形绘制命令又重新指向到上下文中
4.stroke()
通过线条来绘制图形轮廓，开始绘制图形，当前路径下的所有子路经都会绘制出来
5.fill()
通过填充闭合路径的内容区域生成实心的图形，如果不是闭合路径此时只是把路径的中间区域填充颜色，并不会把起点和终点连接起来。默认是黑色，fillStyle可设置填充颜色。但是直线不会填充，至少需要两条有交点的射线可以形成闭合区域。
6.fillText()
在画布上绘制“被填充的”文本
7.strokeText(text,x,y,maxWidth);
方法在画布上绘制文本（无填充），文本的默认颜色是黑色。使用 font 属性来定义字体和字号，并使用 strokeStyle 属性以另一种颜色/渐变来渲染文本。
绘制文本的参数：
text：规定在画布上输出的文本。
x：开始绘制文本的 x 坐标位置（相对于画布）。
y：开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth：可选，允许的最大文本宽度，是像素值。当所有字体的宽度超出最大文本宽度会压缩字体，不会换行显示。
用 font 属性来定义字体和字号，和CSS样式设置一样，必须按照上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。必须保留font-size、font-family属性，否则font属性将不起作用。
渲染上下文对象.font="font-style font-weight font-size/line-height font-family";
textBaseline：指定垂直方向，可选值：top、hanging等。
alphabetic：默认，文本基线是普通的字母基线。
top：文本基线是方框的顶端。
hanging：文本基线是悬挂基线。
middle：文本基线是方框的正中。
ideographic：文本基线是表意基线。
bottom：文本基线是方框的底端。
textAlign：属性指定水平方向对齐方式
start：默认，文本在指定的位置开始。
end：文本在指定的位置结束。
center：文本的中心被放置在指定的位置。
left：文本左对齐。
right：文本右对齐。
效果参考下图，指定的位置（开始绘制文本的x，y坐标）就是图上的点
8.isPointInPath()
如果指定的点位于当前路径中，则返回 true，否则返回 false
9.arc(x,y,r,sAngle,eAngle,counterclockwise)
创建弧/曲线（用于创建圆形或部分圆）
10.arcTo(x1,y1,x2,y2,r)
创建两切线之间的弧/曲线
x1:弧的起点的 x 坐标
y1:弧的起点的 y 坐标
x2:弧的终点的 x 坐标
y2:弧的终点的 y 坐标
r:弧的半径
11.rect(x,y,width,height)
创建矩形，使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。
四个参数： 起点坐标x,y：矩形左上角坐标； 宽度width：矩形的宽度，是像素值； 高度height：矩形的高度，是像素值；
12.strokeRect(x,y,width,height)
绘制矩形（不填色）。笔触的默认颜色是黑色，使用 strokeStyle 属性来设置笔触的颜色、渐变或模式
四个参数： 起点坐标x,y：举行左上角坐标； 宽度width：矩形的宽度，是像素值； 高度height：矩形的高度，是像素值；
13.fillRect(x,y,width,height)
方法绘制“已填色”的矩形。默认的填充颜色是黑色，使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式
四个参数： 起点坐标x,y：举行左上角坐标； 宽度width：矩形的宽度，是像素值； 高度height：矩形的高度，是像素值；
14.clearRect(x,y,width,height)
方法清空给定矩形内的指定像素。
x：要清除的矩形左上角的 x 坐标
y：要清除的矩形左上角的 y 坐标
width：要清除的矩形的宽度，是像素
height：要清除的矩形的高度，是像素
属性
1.strokeStyle：设置画笔的颜色
2.lineWidth：设置线条宽度
3.font：设置字体样式
4.fillStyle：设置填充颜色
5.lineCap：设置或返回线条的结束端点样式
butt：线段末端以方形结束
round：线段末端以圆形结束
square：线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
6.lineJoin：设置或返回两条线相交时，所创建的拐角类型
round 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。
bevel 在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。
miter(默认) 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。
