Html5 canvas 基础API

   Canvas对象表示一个html元素<canvas>,它自己并没有行为，但是它将绘图的API交给了客户端脚本javascript。从而我们有机会运用javascript将我们想要绘制的东西展示在canvas画布上。它可以绘制路径、矩形、圆、字符以及图像等，注意canvas只是一个绘图容器，正真的绘图操作还得依靠javascript的API。

   Canvas绘图：

  首先我们需要获取canvas对象，并从canvas对象中得到二维对象。

  

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

 绘制路径API：

  moveTo(x,y):显示指定路径的起点坐标为(x,y)，默认原点为屏幕的左上角，横向为X轴，纵向为Y轴。

  lineTo(x,y):绘制一条从起点到(x,y)的直线，并且将起始位置设置为(x,y)

  rect(left , top , width , height):绘制一个已知左上角位置的，以及高宽的矩形，绘制完成后起点设置为左上  角端点的位置。

  arcTo(x1,y1,x2,y2,radius):用于绘制一个与两条线段相切的圆弧，两条线段分别以当前Context的起点和          (x2,y2)为起点，都以(x1,y1)为终点，圆弧半径为radius。绘制完成后起点将会设置为(x1,y1)和(x2,y2)形     成线段与圆弧的切点位置。

  arc(x,y,radius,startAngle,endAngle,anticlockwise):用于描绘一个以(x, y)点为圆心，radius为半径，startAngle为起始弧度，endAngle为终止弧度的圆弧。anticlockwise为布尔型的参数，true表示逆时针，false表示顺时针。参数中的两个弧度以0表示0°，位置在3点钟方向；Math.PI值表示180°，位置在9点钟方向。

quadraticCurveTo( cpx , cpy ,  x ,  y) : 以当前Context绘制起点为起点，(cpx,cpy)点为控制点，(x, y)点为终点的二次样条曲线路径。

bezierCurveTo( cpx1 , cpy1 ,  cpx2 ,  cpy2 ,  x ,  y)： 以当前Context绘制起点为起点，(cpx1,cpy1)点和(cpx2, cpy2)点为两个控制点，(x, y)点为终点的贝塞尔曲线路径。

绘制与填充

stroke() : 按照路线绘线条。

fill() : 使用当前设置好的 style 来填充路径区域。

clip() : 按照已有的路线在画布中设置剪辑区域，调用后图形编辑代码只会对编辑区域有效，对外界无效。如未调用则就是当前整个 canvas 为编辑区域。

 直接绘制图形：

  fillRect(left,top,width,height):使用当前的fillStyle样式填充一个左顶点在(left,top)，宽高为width、height的矩形。

  strokeRect(left,top,width,height):使用当前的线段风格绘制一个左顶点在(left,top),宽高为width、height的矩形。

  clearRect(left,top,width,height):清除左顶点在(left,top)，宽高为width、height的矩形内的所有内容。

绘制图片：

context对象的drawImage()方法可以将外部的图片绘制到canvas上。drawImage方法有如下3中重构方法。

drawImage(image,dx,dy)//dx->destination x
drawImage(image,dx,dy,dw,dh)
drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)//sx->source x

 这些参数的含义，如下图