canvas简介
HTML5标签用于绘制图像（通过脚本，通常是JavaScript）。
不过，元素本身并没有绘制能力（它仅仅是图形的容器）-您必须使用脚本来完成实际的绘图任务。
getContext()
参数：2d
返回值：返回一个绘图环境，绘图环境有一些方法和属性，用于绘制图形
illStyle
作用：设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle
作用：设置或返回用于填充绘画的颜色、渐变或模式
lineWidth
作用：设置或返回当前的线条宽度
font
作用：设置或返回文本内容的当前字体属性
取值：italicsmall-capsbold12pxarial
textAlign
作用：设置或返回文本内容的当前对齐方式
取值：center：文本的中心被放置在指定的位置。end： 文本在指定的位置结束。left：文本左对齐。right：文本右对齐。start：文本在指定的位置开始。
fill()
作用：填充当前绘图或路径
参数：无
moveTo(x，y)
作用：把路径移动到指定位置，不创建线条
参数：指定点的x和y坐标
lineTo(x，y)
作用：添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）
参数：指定点的x和y坐标
fillRect(x，y，width，height)
作用：绘制一个填充的矩形，默认颜色是黑色
参数：第一个参数起始点的x坐标，第二个参数是起始点的y坐标，第三个参数是矩形的宽度，第四个参数是矩形的高度
stroke()
作用：会实际地绘制出通过moveTo()和lineTo()方法定义的路径。默认颜色是黑色。
参数：无
strokeRect(x，y，width，height)
作用：绘制一个没有填充的矩形
参数：第一个参数起始点的x坐标，第二个参数是起始点的y坐标，第三个参数是矩形的宽度，第四个参数是矩形的高度
rect(x，y，width，height)
作用：创建一个矩形，没有实际的线条
参数：第一个参数起始点的x坐标，第二个参数是起始点的y坐标，第三个参数是矩形的宽度，第四个参数是矩形的高度
clearRect(x，y，width，height)
作用：清除指定矩形内的元素
参数：第一个参数要清除的矩形左上角的x坐标，第二个参数要清除的矩形左上角的y坐标,第三个参数是要清除的矩形的宽度，第四个参数是要清除的矩形的高度
beginPath()
作用：开始一条路径，或重置当前的路径。
参数：无
arc(x，y，r，sAngel，eAngel)
作用：创建弧/曲线（用于创建圆或部分圆）
参数：x：圆心x坐标，y：圆心y坐标，r：圆的半径，sAngel：圆开始的弧度，eAngel：圆结束的弧度，counterclockwise：可选，规定应该逆时针还是顺时针绘图。False=顺时针，true=逆时针。
closePath()
作用：创建从中点回到起始点的路径。
参数：无
arcTo(x，y，x1，y1，r)
作用：在画布上创建介于两个切线之间的弧/曲线。
参数：x： 弧的起点的x坐标，y： 弧的起点的y坐标，x1： 弧的终点的x坐标，y1： 弧的终点的y坐标，r：弧的半径
fillText(text，x，y，maxwidth)
作用：在画布上绘制填充的文本
参数：text：要绘制的文本，x：起始点的x坐标，y：起始点的y坐标，maxwidth：可选，设置文本的最大长度
strokeText(text，x，y，maxwidth)
作用：在画布上绘制没有填充的文本
参数：text：要绘制的文本，x：起始点的x坐标，y：起始点的y坐标，maxwidth：可选，设置文本的最大长度
drawImage(img，sx，sy，swidth，sheight，x，y，width，height)
作用：在画布上绘制图像、画布或视频。也可以制图像的某些部分，以及/或者增加或减少图像的尺寸。
参数：img： 规定要使用的图像、画布或视频，sx： 可选。开始剪切的x坐标位置。，sy： 可选。开始剪切的y坐标位置。，swidth： 可选。被剪切图像的宽度。，sheight：可选。被剪切图像的高度。，x：在画布上放置图像的x坐标位置。，y：在画布上放置图像的y坐标位置，width：可选。要使用的图像的宽度。（伸展或缩小图像） 。，height： 可选。要使用的图像的高度。（伸展或缩小图像）