HTML5最少欢迎的一个新功能就是canvas元素，这个元素负责在页面中设定一个区域，然后就可以使用javascript进行动态的绘图。

• 基本用法

<canvas id="drawing" widht="200" height="300">
a drawing of somethind
</canvas>

设定了画布后，要去的绘图上下文,通过get.Context("2d")方法

var  drawing = document.getElementById("drawing");
if(drawing.getContext){
var context = drawing.getContext("2d");
}

使用toDataURL(),参数为图像的MIME类型格式，如toDataURL("image/png")

var  drawing = document.getElementById("drawing");
if(drawing.getContext){
var context = drawing.getContext("2d");
var imgURI = context.toDataURL("image/png");
var image = document.createElement("img");
image.src = img;
documemt.body.appendChild(image);
}

• 2D上下文

　　2D上下文的坐标开始与canvas元素的左上角。使用2D上下文可以绘制矩形、弧形和路径。2D上下文两个基本操作就是填充和描边，属性fillStyle()实现填充效果，属性strokeStyle()实现描边效果，这两个方法的参数为表示颜色的字符串、渐变对象、模式对象。

　　1）绘制矩形

　　　　对于绘制矩形有三种方法：fillRect() , strokeRect()  , clearRect()。这三个方法都接受四个参数，x坐标，y坐标，width,height。

　　　　fillRect()的填充颜色由filleStyle()方法指定，同理stokeRect()由strokeStyle()指定。

　　　　描边线条的宽度有lineWidth()指定，lineCap指定线条末端是平头(butt)、圆头(round)还是方头(square),lineJoin()控制线条相交的方式(圆交round,斜交bevel,斜接miter)

　　　　clearRect()用于清理画布上得指定区域。

context.fillRect(10,10,50,50);
context.fillStyle("red");
context.stokeRect(20,20,50,50);
context.strokeStyle("green");
context.lineWidth(5);
context.lineCap('round');
context.lineJoin("round");

　　2) 绘制路径

　　　　绘制路径首先调用beginPath()，表示要绘制新的路径。然后调用下面的方法绘制实际的路径。

　　　　1）绘制弧线   arc(x,y,radius,staryAngle,endAngle,counterClockWise) --- 以（x,y）为圆心，半径为radius，开始角度为startangle,结束角度为endangle，counterClockWise值为false表示按顺时针计算。

　　　　2）从上一点开始绘制弧线  arcTo(x1,y1,x2,y2,radius)，以x2,y2为终点，通过x1,y1

　　　　3) 从上一个点绘制曲线  bezierCurveTo(c1x,c1y,c2x,c2y,x,y) ，从上一点开始绘制曲线，终点为x,y，以（c1x,c1y）（  c2x,c2y）为控制点

　　　　4）从上一点开始绘制一条直线   lineTo(x,y)

　　　　5) moveTo(x,y)  绘制图表移动到x,y点

　　　　6) quadraticCurveTo(cx,cy,x,y) 绘制二次曲线，终点为x,y，cx,cy为控制点

　　　　7）rect(x,y,widht,height)  绘制矩形路径

　　创建路径后，调用closePath()绘制连接到起点的路径，调用fill()填充路径，调用stroke()创建描边路径。

　　　　以下代码绘制了时钟：

//外圆
context.arc(100,100,99,0,2*Math.PI,false);
//内圆
context.arc(100,100,94,0,2*Math.PI,false);
context.moveTo(100,100);
context.lineTo(100,15);context.moveTo(100,100);
context.lineTo(100,30);//描边路径
context.storke();

　　3）绘制文本

　　　　绘制文本主要由两个方法：fillText(),stokeText(),接收四个参数：文本字符串，x坐标，y坐标，可选的最大宽度。

　　　　这两个方法以下面的属性为基础：font, textAlign ， textBaseline

　　　　textAlign的值有start end  center，控制水平对齐方式 ,  textBaseline的值有middle,top,bottom，控制垂直对齐方式。

　　　　辅助测量文本所占的宽度方法meatureText(文本字符串),返回的对象只有一个width属性，这个方法是以设置的font,textAlign,textBaseline属性来测量文本可宽度。

var fontsize = 140px;
context.font = fontsize + "  italic  Arial";
context.textAlig = center;
context.textBaseline = "top";
while(context.meatureText("hello").width > 140){
fontsize -- ;
context.font = fontsize + "  italic  Arial";
}
context.fillStyle("red");
context.fillText("hello",10,10);

　　4)变换

　　　　修改变化矩阵的方法：

　　　　rotate(angle):围绕原点旋转angle角

　　　　scale(scaleX,scaleY) : 缩放图像，在x方向乘以scaleX,在y方向乘以scaleY

　　　　translate(x,y) : 将坐标原点移动到（x,y）点

　　　　transform(m1_1,m2_1,m2_1,m2_2,dx,dy)  :  直接修改变换矩阵

　　　　setTransforn(m1_1,m2_1,m2_1,m2_2,dx,dy) :  将变换矩阵重置为默认状态，在调用transform方法

　　　　通过context.save()可以将设置保存下来，再通过context.restore（），从当前设置一级一级向上得到之前的设置

　　5）绘制图像

　　　　通过方法drawImage()绘制图像，不同的实现效果这个方法需要传入的参数不同。

　　　　最简单的参数是，html的image元素，绘制区域起点x坐标，y坐标

var img = document.images[0];
context.drawImage(img,10,10);

　　　　绘制图像的一部分到画布中：

　　　　参数为：image元素，源图像的坐标起点x值，y值，width,height,目标图像的x值，y值，width,height.

　　　　将一个canvas元素绘制到另一个画布中

　　　　6）阴影

　　　　　　shadowColor = 颜色值

　　　　　　shadowOffsetX =  X方向的偏移量

　　　　　　shadowOffsetY = Y方向的偏移量

　　　　　　shadowBlur = 模糊值

　　　　7）渐变

• 　　线性渐变　　　　　　

调用createLinearGradient(起点x坐标，起点y坐标，终点的x坐标，终点的y坐标)，返回canvasGradient渐变对象。创建渐变对象后调用addColorStop(色标的位置，css颜色值),色标的位置从0到1，0代表开始的颜色，1代表结束的颜色，把这个方法返回的渐变对象赋给fillStyle或者storkeStyle(),就可以使用渐变来绘制形状或者描边。

var gradient = context.createLinearGradient(30,30,70,70);
gradient.addColorStop(0,''white");
gradient.addColorStop(1,"blue")context.fillStyle = gradient;
context.fillRect(30,30,40,40);

• 　　　径向渐变

方法类似线性渐变，context.createRadialGradient(起点圆的x坐标，y左边，半径，终点圆的x坐标，y坐标，半径)

　　8）使用模式

　　　　模式其实是重复的图像，调用方法createPattern(image元素，css的background-repeat值)，将返回对象赋给fillstyle()

var img = document.images[0];
var pattern = context.createPattern(img,"repeat");
context.fillStyle = pattern;
context.fillRect(30,30,100,100); 

　　createPattern的第一个参数也可以是video对象或者canvas对象

　　9）获得图像数据

　　　　调用方法getImageData(获得的图像区域的x坐标，y坐标，width,height) ， 返回imageData对象，这个对象有三个属性：width,height，data . 其中data属性存储这图像中每一个像素的值，每个像素又保存着rgba四个元素值。

　　　　var data = context.getImageData(0,0,image.width,image.height);

　　　　red = data[0]

　　　　gree = data[1]

　　　　blue = data[2]

　　　　alpha = data[3]

　　10) 合成

　　　　两个属性：globalAlpha = 0到1之间的值 ，  globalCompositionOperation = 指定的字符串值。

　　　　　globalAlpha设置所有绘制区域的透明度

　　　　　globalCompositionOperation指定先绘制的图形与后绘制的图形如何重叠。