1.基本用法
要使用canvas元素，必须先设置其width和height属性，制定可以绘画的区域大小。出现在开始和结束标签中的内容是后备信息，如果浏览器不支持<canvas>元素，就会显示这些信息，如：
<canvas id='drawing' width='200' height='200'>A drawing of something.</canvas>
要在这块画布上绘画，需要取得绘图上下文。而取得绘图上下文对象的应用，需要调用getContext()方法传入上下文的名字。传入‘2d’，就可以取得2D上下文对象。
var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if(drawing.getContext){
var context = drawing.getContext('2d');
}
在使用<canvas>元素之前，首先要检测getContext()方法是否存在，这一步非常重要。有些浏览器会为HTML规范之外的元素创建默认的HTML元素对象。在这种情况下，及时drawing变量中保存着一个有效的元素应用，也检测不到getContext()方法。
2.2D上下文
2D上下文的坐标开始于<canvas>元素的左上角，原点坐标是(0,0)。所有坐标值都基于这个原点计算，x值越大表示越靠右，y值越大表示越往下。默认情况下，width和height表示水平和垂直两个方向可用的像素的数目。
2.1 填充和描边
这两个操作的结果取决于两个属性：fillStyle和strokeStyle
var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if(drawing.getContext()){
var context = drawing.getContext('2d');
context.fillStyle = 'red';
context.strokeStyle = '#fff000';
}
2.2 绘制矩形
与矩形有关的方法包括fillRect(),stokeRect()和clearRect()。这三个方法都能接收4个参数：矩形的x坐标，矩形的y坐标，矩形的宽度和矩形的高度。这些参数的单位都是像素。
首先fillRect()方法在画布上绘制的矩形会填充制定的颜色，填充的颜色通过fillStyle属性指定，比如：
var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if(drawing.getContext){
var context = drawing,getContext('2d');
//绘制红色 矩形
context.fillStyle = 'red';
context.fillRect(10,10,50,50);
//绘制半透明的蓝色矩形
context.fillStyle = 'rgba(0,0,255,0.5)';
context.fillRect(30,30,50,50);
}
以上代码首先将fillStyle设置成红色，然后从(10,10)处开始绘制，矩形的宽度和高度均为50像素。然后，通过rgba()格式再将fillStyle设置为半透明的蓝色，在第一个矩形上面绘制第二个矩形。
strokeRect方法在画布上绘制矩形：
var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if(drawing.getContext){
var context = drawing.getContext('2d');
//绘制红色矩形
context.strokeStyle = 'red';
context.strokeRect(30,30,50,50);
//绘制半透明的蓝色矩形
context.strokeStyle = 'rgba(0,0,255,0.5)';
context.strokeRect(30,30,50,50);
}
clearRect()本质上可以吧绘制上下文中的某一矩形区域变透明。通过绘制形状然后再清楚指定区域，就可以生成有意思的效果，例如把某个形状切掉一块。
var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if(drawing.getContext){
var context = drawing.getContext('2d');
//绘制红色矩形
context.fillStyle = 'red';
context.fillRect(10,10,50,50);
//绘制半透明的蓝色矩形
context.strokeStyle = 'rgba(0,0,255,0.5)';
context.strokeRect(30,30,50,50);
//在两个矩形重叠的地方清除一个小矩形
context.clearRect(40,40,10,10);
}
2.3绘制路径
arc(x,y,radius,starAngle,endAngle,counterclockwise);
以(x,y)为圆心绘制一条弧线，弧线半径为radius,起始和结束角度(用弧度表示)，最后一个参数表示是否按逆时针方向，false表示按照顺时针方向。
arcTo(x1,y1,x2,y2,radius);
从上一点开始绘制一条弧线，到下一点。
bezierCurveTo(c1x,c1y,c2x,c2y,x,y);
从上一点开始绘制一条曲线，到(x,y)为止，并且以(c1x,c1y)和(c2x,c2y)为控制点。
quadraticCurveTo(cx,cy,x,y);
从上一点开始控制一条二次曲线，到(x,y)为止，并且以(cx,cy)作为控制点。
lineTo(x,y);
从上一点开始绘制一条直线，到(x,y)为止
moveTo(x,y);
将绘图游标移动到(x,y)，不画线
rect(x,y,width,height);
这个绘制的是路径，而不是strokeRect()和fillRect()所绘制的独立形状。
创建了路径之后，如果想要绘制一条连接到路径起点的线条，可以调用closePath()。如果路径已经完成，你想用fillStyle填充它，可以调用fill()方法，另外可以调用stroke()方法对路径描边。最后还可以调用clip()，这个方法可以在路径上创建一个剪切区域。
2.4绘制文本
绘制文本主要有两个方法：fillText()和strokeText()。接收四个参数，要绘制文本的字符串，x坐标，y坐标，和可选最大像素宽度。
context.font = 'bold 14px Arial'//表示文本样式，大小及字体，用CSS中指定字体的格式指定
context.textAlign='center';//表示文本对齐方式，可能的值有'start,end,left,right,center'
context.textBaseline = 'middle'//表示文本的基线，可能的值有'top,hanging,middle,alphabetic'
context.fillText('12',100,20);
2.5变换
rotate(angle);
围绕原点旋转图像angle弧度
scale(scaleX,scaleY);
缩放图像，在x方向乘以scaleX，在y方向乘以scaleY。scaleX，scaleY默认值为1.0
translate(x,y);
将坐标原点移动到(x,y)。执行这个变换之后，坐标(0,0)会变成由(x,y)表示的点。
transform(m1_1,m1_2,m2_1,m2_2,dx,dy);
直接修改变换矩阵，方式是乘以如下矩阵
m1_1 m1_2 dx
m2_2 m2_2 dy
0 0 1
setTransform(m1_1,m1_2,m2_1,m2_2,dx,dy)
将变换矩阵重置为默认状态，然后再调用transform()
var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if(drawing.getContext){
var context = drawing.getContext('2d');
//开始路径
context.beginPath();
//绘制外圆
context.arc(100,100,99,0,2*Math.PI,false);
//绘制内圆
context.moveTo(194,100);
context.arc(100,100,94,0,2*Math.PI,false);
//变换原点
context.translate(100,100);
//旋转表针
context.rotate(1);
//绘制分针
context.moveTo(0,0);
context.lineTo(0,-85);
//绘制时针
context.moveTo(0,0);
context.lineTo(-65,0);
//描边路径
context.stroke();
}
无论是前面进行的变换，还是fillStyle、strokeStyle等属性，都会在当前上下文中一直有效，除非在对上下文进行什么修改。如果你知道将来还要返回某组属性与变换组合，可以调用save()方法，调用这个方法后，如果想要回到之前保存的设置时，调用restore()。连续调用save()可以把更多设置保存到栈结构中，之后再连续调用restore()则可以一级一级返回。
2.6绘制图像
context.drawImage(image,10,10);
2.7阴影
shadowColor:用CSS颜色格式表示的阴影颜色，默认为黑色
shadowOffsetX：形状或路径x轴方向的阴影偏移量，默认为0
shadowOffsetY：形状或路径y轴方向的影响偏移量，默认为0
shadowBlur：模糊的像素数，默认0，即不模糊
var context = drawing.getContext('2d');
//设置阴影
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4;
context.shadowColor = 'rgba(0,0,0,0.5)';
2.8渐变
//线性渐变
var gradient = context.createLinearGradient(30,30,70,70);
gradient.addColorStop(0,'white');//起点色标是白色
gradient.addColorStop(1,'black');//终点色标是黑色
//绘制渐变矩形
context.fillStyle = 'gradient';
context.fillRect(30,30,30,50,50);//为了让渐变覆盖整个矩形，而不是仅应用到矩形的一部分，矩形和渐变对象的坐标必须匹配才行
//径向渐变
var gradient = context.createRadialGradient(55,55,10,55,55,30);//整个方法接收6个参数，对应着两个圆的圆心和半径。
gradient.addColorStop(0,'white');
gradient.addColorStop(1,'black');
context.fillStyle = gradient;
context.fillRect(30,30,50,50);
2.9模式
模式其实就是重复的图像，可以用来填充或描边图形。要创建一个新模式，可以调用createPattern()方法并传入两个参数，一个HTML img元素和一个表示如何重复图像的字符串。其中，第二个参数的值与CSSd background-repeat属性值相同，包括'repeat'、'repeat-x','repeat-y'和'no-repeat'
var image = document.image[0],pattern = context.createPattern(image,'repeat');
context.fillStyle = pattern;
context.fillRect(10,10,150,150);
2.10使用图像数据
2D上下文的一个明显的长处就是，可以通过getImageData()取得原始图像数据。这个方法接收4个参数：要取得其数据的画面区域的x和y坐标以及该区域的像素宽度和高度。例如，要取得做商检坐标为(10,5)、大小为50*50像素的区域的图像数据，可以会用一下代码：
var imageData = document.getImageData(10,5,50,50);
这里返回的对象是ImageData实力。每个ImageData对象都有三个属性：width、height和data。其中data属性是一个数组，保存着图像每一个像素的数据。在data数组中，每一个像素用4个元素保存，分别表示红、绿、蓝和透明度值。
var data = imageData.data, red = data[0], green = data[1], blue = data[2], alpha = data[3];
数组中每个元素的值都介于0到255之间，能够直接访问到院士图像数据。就能够以各种方式来操作这些数据。例如，通过修改图像数据，可以像下面这样创建一个简单的灰阶过滤器
var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if(drawing.getContext){
var context = drawing.getContext('2d'),
image = document.images[0],
imageData,data,i,len. average, red, green,blue, alpha;
//绘制原始图像
context.drawImage(image,0,0);
//取得图像数据
imageData = context.getImageData(0,0,image.width,image.height);
data = imageData.data;
for(var i=0,len = data.length; i < len;i+=4){
red = data[i]; green = data[i+1]; blue = data[i+2]; alpha = data[i+3];
//求rgb平均值
average = Math.floor((red+green+blue)/3);
//设置颜色值，透明度不变
data[i] = average; data[i+1] = average; data[i+2] = average;
}
//会写图像数据并显示结果
imageData.data = data;
context.putImageData(imageData,0,0);
}
这个例子首先在画面上绘制了一副图像，然后取得了原始图像数据，其中的for循环遍历了图像数据中的每一个元素。这里要注意的是，每次循环控制变量i都递增4。在取得每个像素的红、绿、蓝颜色值后，计算出他们的平均值。再把这个平均值设置为每个颜色的值，结果就是去掉了每个像素的颜色，只保留了亮度接近的灰度值（即彩色变黑白）。在吧data数组回写到imageDAta对象后，调用putImageData（）方法吧图像数据绘制到画布上。最终得到了图像的黑白版。
2.11合成
绘制操作的属性：globalAlpha和globalCompositionOperation
globalAlpha设置全局透明度
context.globalAlpha = 0.5;
globalCompositionOperation表示后绘制的图形怎样与先绘制的图形结合
source-over(默认值)：后绘制的图形位于先绘制的图像之上。。。。。等 请百度
