Canvas API

1、Canvas本质上是一个画布，在它上面绘制的图形是不可以缩放的。此外，使用Canvas绘制出来的对象不属于页面DOM结构或者任何命名空间。

2、HTML5 <canvas>元素用于图形绘制，通过脚本（通常是JavaScript）来完成。 <canvas>标签只是图形容器，你必须使用脚本来绘制图形。

3、通过Canvas路径可以绘制任何形状。绘制形状时，先绘制轮廓，再绘制边框和填充。
创建自定义形状很简单，使用beginPath()开始绘制，这个函数不带任何参数，它用来通知Canvas将要开始绘制一个新的图形了，然后使用直线、曲线、和其他图形绘制图形。调用了beginPath之后，就可以使用context的各种方法来绘制想要的形状了。
       例如：moveTo(x,y)—该函数不进行绘制，只是将当前位置移动到新的目标坐标（x,y）。
                 lineTo(x,y)该函数不仅将当前位置移动到新的目标坐标（x,y），而且在两个坐标之间画一条线。
绘制完毕后调用fill和stroke即可添加填充或着设置边框。
调用closePath()结束自定义图形绘制。closePath()函数的行为通lineTo很类似，唯一的差别在于closePath会将路径的起始坐标自动作为目标坐标。 

                                                    

5、在HTML5 Canvas API中变换绘图方式，通过变换函数，可以对绘制的图形进行空间坐标的平移、缩放和旋转操作。在应用的时候可以被顺序应用、组合或者随意修改。
对于绘制图形进行变换操作，通常有3个方法可以调用:translate()、scale()和rotate()
translate() 调用该方法，可以对绘制图形的空间坐标进行转换，例如绘制图形的起点坐标是（0,0），通过该方法可以将空间坐标转换为(100,100)。这样绘制的图形就进行了相应的平移
scale() 调用该方法，可以对绘制的图形沿着x、y坐标进行缩放。单位是浮点数。例如：。0.5 代表缩放50%。

rotate() 调用该方法，可以对绘制的图形进行旋转。单位是浮点数。

                                                                     

6、一般再绘制图形的时候，要绘制多个图形元素，那么变换操作可能只是对其中某一个元素进行操作。为了不影响后续的绘制过程。在变换前，应该调用save()方法把当前状态保存起来，变换操作完毕之后，再通过调用restore()方法，来重置之前的绘图状态。这样就不会影响后续的Canvas操作。

7、在Canvas中显示图片非常简单。可以通过修正层为图片添加印章、拉伸图片或修改图片等。并且图片通常会成为Canvas上的焦点。
在Canvas中插入图片时，需要调用drawImage()方法。

                                                                     

8、绘制文字

context上下文对象，可以设置一些text属性.
font文字字体，同CSS font-family属性
textAlign文字水平对齐方式。可以取属性值：start默认、end、left、right、center
例如，文字水平对齐方式
textBaseLine 文字竖直对齐方式，可取值：top、hanging、middle、alphabetic、ideographic、bottom。默认值：alphabetical。
例如，文字集显对齐方式
有两个方法可以绘制文字：
fillText(text,x,y,maxwidth)//填充文字
strokeText(text,x,y,maxwidth)//轮廓文字

                                                                  

9、在HTML5 Canvas中，除了可以绘制图形、填充颜色之外，同样可以向Photoshop软件中的渐变工具一样，绘制渐变对象。
要绘制渐变对象有两种方法(这两个方法同时可以应用与填充和线条):
a、createLinearGradient()
      该方法创建线性颜色渐变，它在指定的起始点和结束点之间线性的填充颜色
      createLinearGradient(xStart,Ystart,xEnd,Yend);
                                        起始点坐标     终止点坐标
b、 createRadialGradient()
      该方法创建径向渐变，它再两个指定圆的圆周之间径向填充颜色
      createRadialGradient(xStart,YStart,radiusStart,xEnd,yEnd,radiusEnd);
       参数说明：
             参数                       功能说明
            xStart,yStart           开始圆的圆心的坐标
            radiusStart             开始圆的直径
            xEnd,yEnd             结束圆的圆心的坐标
            radiusEnd               结束圆的直径