[HTML5 Canvas学习] 基础知识

　　HTML5 canvas元素通过脚本语言（通常是Javascript) 绘制图形, 它仅仅是一个绘图环境，需要通过getContext('2d')方法获得绘图环境对象，使用绘图环境对象在canvas元素上进行绘制。

　　getContext('2d')获得的对象时CanvasRenderingContext2D对象，它所包含的属性如下：

属性	简介
canvas	指向该绘图环境所属的canvas对象。该属性最常见的用途是通过它来获取canvas的宽度和高度，分别调用context.canvas.width 和context.canvas.height即可。
fillstyle	指定该绘图环境在后续的图形填充操作中所使用的颜色、渐变色或图案。
font	设定在调用绘图环境对象的fillText()或strokeText()方法时，所使用的字形。
globalAlpha	全局透明度设定，它可以取0 ~ 1.0之间的值。浏览器会将每一个像素的alpha值与该值相乘，在绘制图像时也是如此。
globalCompsiteOperation	该值决定了浏览器将某个物体绘制在其他物体之上时，所采用的绘制方式。
lineCap	该值告诉浏览器如何绘制线段的端点，可以在以下三个值中指定一个：butt、round及square。默认值是butt
lineWidth	该值决定了在canvas之中绘制线段的屏幕像素宽度。它必须是一个非负、非无穷的double值。默认值是1.0
lineJoin	告诉浏览器在两条线段相交时如何绘制焦点。可取的值是：bevel、round、miter。默认值是miter
miterLimit	告诉浏览器如何绘制miter形式的线段焦点。
shadowBlur	该值决定了浏览器如何延伸阴影效果。值越高，阴影效果延伸得就越远。该值不是指阴影的像素长度，而是代表高斯模糊方程式中的参数值。
shadowColor	该值告诉浏览器使用何种颜色来绘制阴影。通常采用半透明作为该属性的值，以便让后面的背景能显示出来。
shadowOffsetX	以像素为单位，指定了阴影效果的水平方向偏移量。
shadowOffsetY	以像素为单位，指定了阴影效果的垂直方向偏移量。
strokeStyle	指定了对路径进行描边时所用的绘制风格。该值可被设定为某个颜色、渐变色或图案。
textAlign	决定了以fillText()或strokeText()方法进行绘制时，所画文本的水平对齐方式。
textBaseline	决定了以fillText()或strokeText()方法进行绘制时，所画文本的垂直对齐方式。

　　包含方法如下：

save()	将当前canvas的状态推送到一个保存canvas状态的堆栈顶部。canvas状态包括了当前的坐标变换(transformation)信息、剪辑区域(cliping region)以及所有canvas绘图环境对象的属性。 包括了strokeStyle、fillStyle与globalCompositeOperation等
restore()	将canvas状态堆栈顶部的条目弹出。原来保存于栈顶的那一组状态，在弹出之后，就被设置成canvas当前的状态了。
clearRect(double x, double y, double w, double h)	将指定矩形与当前剪辑区域相交范围内的所有像素清除。
strokeRect(double x, double y, double w, double h)	使用如下属性，为指定的矩形描边： strokeStyle、lineWidth、lineJoin、miterLimit
fillRect(double x, double y, double w, double h)	使用fillStyle属性填充指定的矩形。
CanvasGradient createLinearGradient(double x0, double y0, double x1, double y1)	创建线性渐变
CanvasGradient createRadialGradient(double x0, double y0, double r0, double x1, double y1, double r1)	创建放射渐变
arc()	在当前路径中增加一段表示圆弧或圆形的子路径。可以通过一个boolean参数来控制该段子路径的方向。如果此参数是true, 那么arc()所创建的子路径就是逆时针，否则是顺时针。
beginPath()	将当前路径之中的所有子路径都清除掉，以此来重置当前路径。
closePath()	显式地封闭某段开放路径。
fill()	使用fillStyle对当前路径的内部进行填充。
rect(double x, double y, double w, double h)	在坐标(x, y)处建立一个宽度为w， 高度为h的矩形子路径。该子路径一定是封闭的，而且总是按顺时针方向来创建的。
stroke()	使用strokeStyle来描绘当前路径的轮廓线。
moveTo(x, y)	向当前路径中增加一条子路径，该子路径只包含一个点，就是由参数传入的那个点。该方法并不会从当前路径中清除任何子路径。
lineTo(x, y)	如果当前路径中没有子路径，那么这个方法的行为与moveTo()方法一样。如果当前路径中存在子路径，那么该方法会将你所指定的那个点加入路径中。
quadraticCurveTo(double cpx, double cpy, double x, double y)	创建一条表示二次方贝赛尔曲线的路径。该方法需要传入两个点，第一个是曲线的控制点，第二个点是锚点。
bezierCurveTo(double cpx, double cpy, double cp2x, double cp2y, double x, double y)	创建一条代表三次方贝赛尔曲线的路径。该方法传入三个点的坐标，前两点是该曲线的控制点，最后一个点是锚点。