来自W3c———————————————>>>
1、定义
Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域，做为html5新增的元素，通过脚本（通常是JavaScript）在其中绘制图像。一个画布在页面中是一个矩形框（可以使用多个canvas元素），通过<canvas>元素来绘制。<canvas>元素本身没有绘图能力，仅仅是图形的容器，所有的绘制工作必须在JavaScript内部完成 。
2、<canvas>元素
<canvas id="tutorial" width="300" height="150"></canvas>
只有两个可选的属性：width、height属性，如不设置，则默认width：300px、height：150px。使用css属性设置宽高的话，如果宽高属性和初始值比例不一致，会出现扭曲。
3、一些方法
getContext（"2d"）：内建的HTML5对象，提供用于在画布上绘图的方法和属性，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
fillStyle：css颜色、渐变、图案属性，默认#000。
fillRect（x, y, width, height）：定义矩形当前的填充方式。
fillText（text， x， y)：在canvas上绘制实心的文本。
strokeText（text，x，y）：在canvas上绘制空心的文本。
渐变可以填充在矩形、圆形、线条、文本等，必须使用两种及以上的停止颜色。
createLinearGradient（x, y, x1, y1）：创建线条渐变。
createRadialGradient（x, y, x1, y1）：创建一个径向/圆形渐变。
addColorStop（num， colorString）：指定颜色停止，参数使用坐标来描述，可以是0或1。
drawImage（image， x， y）：把一幅图像放置到画布上。
ceatePattern（image， “repeat|repeat-x|repeat-y|no-repeat")：在指定的方向内重复指定的元素，被重复的元素[图片、视频、其他canvas元素，被重复的元素可用于绘制/填充矩形、圆形、线条等等。
4、坐标，路径
canvas是一个二维网格，左上角的坐标为(0,0)。 fillRect(0, 0, 150, 75)表示在画布（0,0）坐标位置绘制150*75的矩形。
在Canvas上画线：moveTo（x, y）定义线条开始坐标， lineTo（x, y）定义线条结束坐标，stroke（）绘制线条。
渐变可以填充在矩形、圆形、线条、文本等。
Canvas参考手册
属性
1、fillStyle：设置或返回用于填充绘画的颜色、渐变或模式。默认值#000000，js语法：context.fillStyle = color / gradient / pattern;
color:默认值是#000000；
gradient：用于填充绘图的渐变对象（线性createLinearGradient或放射性createRadialGradient），和addColorStop一起使用。
pattern：用于填充绘图的pattern对象（createPattern(image, "repeat-*")）
2、strokeStyle：设置或返回用于笔触的颜色、渐变或模式。默认值#000000，js语法：context.strokeStyle = color / gradient / pattern;
3、shadowColor：设置或返回阴影颜色。默认值#000000，和shadowBlur属性一起创建阴影，通过shadowOffsetX和shadowOffsetY调节阴影，js语法：context.shadowColor = color;
4、shadowBlur：设置或返回阴影的模糊级数，默认值0，js语法：context.shadowColor = number;
5、shadowOffsetX：设置或返回阴影与形状的水平距离，默认值0，数值正/负表示阴影位于形状右/左方，js语法context.shadowOffsetX = number；
6、shadowOffsetY：设置或返回阴影与形状的水平距离，默认值0，数值正/负表示阴影位于形状下/上方，js语法context.shadowOffsetY = number;
方法
1、createLinearGradient（）：创建线性渐变对象，渐变可用于填充矩形、圆形、线条、文本。要使用addColorStop()方法规定不同颜色，以及在该对象中的何处定位颜色，该对象作为fillStyle、strokeStyle的属性值。
js语法：context.createLinearGradient（x0, y0, x1, y1）;x0, y0, x1, y1表示渐变开始点和结束点。
2、createRadialGradient（）：创建放射性/环形的渐变，内容同上。
js语法：context.createRadialGradient（x0, y0,r0,x1, y1,r1）；x0, y0,r0,x1, y1,r1表示渐变开始圆点开始点开始圆的半径和渐变结束点结束圆的半径。
3、createPattern（）：在指定方向内重复指定的元素，被重复的元素可用于绘制/填充矩形、圆形或线条等。
js语法：ceatePattern（image， “repeat|repeat-x|repeat-y|no-repeat")；image表示规定使用的模式图片、画布、或视频元素，repeat-*重复方向。
4、addColorStop（）：规定渐变对象中的颜色和停止位置，可多次调用该方法改变渐变。
js语法：gradient.addColorStop（num，color）；num：0.0~1.0之间的值，表示渐变中的开始与结束之间的位置，color表在num位置显示的css颜色。
线条样式
1、lineCap：设置或返回线条末端线帽的样式。默认值butt。js语法：context.lineCap = "butt | round | square";
butt：向线条的每个末端添加平直的边缘；
round：向线条的每个末端添加圆形线帽子；
square：向线条的每个末端添加正方形线帽；
2、lineJoin：设置或返回所创建边角的类型，当两条线交汇时。默认值miter。js语法：context.line.Join = "bevel | round | miter";
bevel：创建斜角；
round：创建圆角；
miter：创建尖角；
3、lineWidth：设置或返回当前线条的宽度，以像素计。默认值1，js语法：context.lineWith = number;
4、miterLimit：设置或返回最大倾接长度（指两个线交汇处内角和外角之间的
距离）。只有lineJoin属性值为miter时，miterLimit才有效。角度越小，miterLimit值越大。默认值10，js语法：context.miterLimit = number;
矩形
1、rect（）：创建矩形，使用stroke（）或fill（）方法在画布上实际绘制矩形。js语法：context.rect（x, y, width, height）。参数表左上角的坐标以宽高。
2、fillRect（）：绘制”被填充“的矩形。使用fillStyle属性来进行填充颜色、渐变、模式。js语法：context.fillRect（x, y, width, height）。参数分别表示矩形左上角坐标和宽高。
3、strokeRect（）：绘制矩形（无填充）。笔触默认颜色是黑色，使用strokeStyle属性设置笔触颜色、渐变或模式。js语法：context.strokeRect（x, y, width, height），参数表示矩形左上角的坐标以及宽高。
4、clearRect（）：在给定的矩形内清除指定的像素。js语法：context.clearRect（x, y, width, height）;参数分别表示矩形左上角坐标及宽高。
路径
1、fill（）：填充当前绘图(路径)。使用fillStyle属性来填充另一种颜色/渐变。如果路径未关闭，那么fill()方法会从路径结束点到开始点之间添加一条线，已关闭该路径（如closePath)，然后填充该路径。js语法：context.fill（）。
2、stroke（）：实际地绘制出通过moveTo()和lineTo()方法定义的路径（绘制已定义的路径），默认颜色是黑色。js语法：context.stroke（）;
3、beginPath（）：开始一条路径，或重置当前路径。使用moveTo（）、lineTo（）、quadricCurveTo（）、bezierCurveTo（）、arcTo（）、arc（）来创建路径。使用stroke（）方法在画布上绘制确切路径。js语法：context.beginPath（）。
4、closePath（）：创建从当前点到开始点的路径。使用stroke（）方法在画布上绘制确切的路径，fillStyle属性填充另一个颜色/渐变，用fill（）填充图像。js语法：context.closePath（）；
5、moveTo（）：把路径移动到画布中的指定点，不创建线条。使用stroke（）在画布上绘制确切的路径。js语法：context.moveTo（x, y）。参数表示路径目标位置坐标。
6、lineTo（）：添加一个新点，然后在画布中创建从该点到最后指定点的线条(该方法并不会创建线条)。使用stroke（）在画布上绘制确切的线条。js语法：context.lineTo（x, y);参数是路径目标位置的坐标。
7、clip（）：从原始画布中剪切任意形状和尺寸。js语法：context.clip（）。提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)。可以在使用clip（）方法前通过使用save（）方法对当前画布区域进行保存，并在以后的任意时间通过restore（）方法对其进行恢复。
8、quadraticCurveTo（）：通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。路径不存在，使用beginPath（）和moveTo（）定义开始点。js语法：context.quadraticCurveTo（cpx, cpy, x, y）；参数分别表示贝塞尔控制点坐标和结束点坐标。
9、bezierCurveTo（）：通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。路径不存在，使用beginPath（）和moveTo（）定义开始点。js语法：context.bezierCurveTo（cp1x, cp1y, cp2x, cp2y, x, y）；参数分别表示第一个第二个贝塞尔控制点和结束点坐标。
10、arc（）：创建弧/曲线(用于创建圆形或部分圆)。把起始角设置为0，结束角设置为2*Math.PI。使用stroke（）或fill（）方法在画布上绘制实际的弧。js语法：context.arc（x, y, r, sAngle, eAngle, counterclockwise）;参数分别表示圆的中心坐标、圆的半径、起始角、结束角(以弧度计，弧的圆形的三点钟方向位置是0度)，是否顺时针绘制图(false顺时针，true逆时针)。
11、arcTo（）：在画布上创建介于两个切线之间的弧/曲线。使用stroke（）在画布上绘制确切的弧。js语法：context.arcTo（x1, y1, x2, y2, r）；参数分别表示两条切线的横纵坐标，第二条切线上一点的横纵坐标，弧的半径。