绘制图形
1、canvas基础
canvas：相当于一个画布。ID,width,heighr
获取canvas元素 -> 获得上下文(canvas对象的getContext) -> 填充与绘制边框(fill,stroke) -> 设定样式(lineWidth,fillStyle,strokeStyle) -> 绘制(context.fillRect(x,y,width,height))
如：
<canvas id=canvas width=300 height=300/>
<script>
var canvas=document.getElementById("canvas");
if(canvas==null)return;
var context=canvas.getContext('2d');//必须传'2d',不能'3d'
context.fillStyle="red";//颜色也可以是rgb或rgba形式
context.fillRect(0,0,200,200);//填充矩形
context.strokeStyle="blue";
context.lineWidth=1;
context.strokeRect(0,0,200,200);//画矩形
context.clearRect(50,50,100,100);//清空矩形区域
</script>
2、使用路径
开始创建路径：context.beginPath();
创建图形路径：
context.arc(x,y,radius,starAngle,endAngle,anticlockwise);//创建圆形路径
参数：x,y,半径,开始弧度，结束弧度，是否顺时针。
关闭路径：context.cosePath();
设置绘制样式，进行绘制。
如:for(var i=0;i<10;i++){
context.beginPath();
context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
context.closePath();
context.fillStyle='rgba(255,0,0,0.25)';//rgba最后一个参数为透明度
context.fill();
}
moveTo与lineTo:绘制直线，moveTo参数为起点，lineTo指定终点进行绘制，下一次的起点为上一次的终点。
如：//绘制复杂图形
context.beginPath();
context.fillStyle='rgb(100,255,100)';
context.strokeStyle='rgb(0,0,100)';
var x=Math.sin(0);
var y=Math.cos(0);
var dig=Math.PI/15*11;
for(var i=0;i<30;i++){
var x=Math.sin(i*dig);
var y=Math.cos(i*dig);
context.lineTo(350+100*x,350+100*y);
}
context.closePath();
context.fill();
context.stroke();
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y):绘制贝济埃曲线，lineTo的曲线版。
参数：第一个控制点，第二个控制点，终点
quadraticCurveTo绘制二次样条曲线，只需要一个控制点。
3、绘制渐变图形
线性渐变：
创建对象： var g=context.createLinearGradient(xStart,yStart,sEnd,yEnd)
设置渐变色：g.addColorStop(offset,color),offset是离起点的偏移量(0,1)
设定fillStyle：context.fillStyle=g;
径向渐变：
createRadialGratient(xStart,yStart,radiusStart,sEnd,yEnd,radiusEnd);
4、绘制变形图形
坐标变换：
平移：context.translate(x,y);//x；向左，y:向下。
扩大：context.scale(x,y)
旋转：context.rotate(angle);//angle为旋转的角度。
坐标变换与路径的结合使用：
创建路径的代码抽象到一个方法中，把context传进去。
矩阵变换：context.transform.
5、图形组合
图形上下文对象的globalCompositeOperation属性决定组合方式，用法如下：
context.globalCompositeOperation=type;//
type的值是下面集中字符串之一：
source-over(默认)：图形覆盖在原有图形之上。
destination-over：在原有图形之下绘制新图形。
source-in:新图与原有图形作in运算，只显示新图中与原有图形重叠部分。
destination-in:原图与新图作in运算，只显示原图中与新图重叠部分。
source-out:新图与原图作out运算，只显示新图中与原图不重叠的部分。
destination-out:原图与新图作out运算，只显示原图中与新图不重叠部分。
source-atop:只绘制新图中与原图重叠的部分与未被重叠覆盖的原有图形。
destination-atop:只绘制原图中被重叠覆盖的部分与新图的其他部分。
lighter:原图和新图均绘制，重叠部分加色处理。
xor:只绘制不重叠部分，重叠部分透明。
copy:只绘制新图，原图中未与新图重叠部分变成透明。
6、给图形绘制阴影
用上下文几个关于阴影绘制的属性。
shadowOffsetX:阴影的横向位移量。
shadowOffsetY:阴影的纵向位移量。
shadowColoe:阴影的颜色。
shadowBlur:阴影的模糊范围。
7、使用图像
绘制：context.drawImage(image,x,y[w,h,[dx,dy,dw,dh]]);
创建image的方法：image=new Image();image.src="1.jpg";
大图像绘制：image.onload=function(){绘制图像}
平铺：context.createPattern(image,type);
type取值：no-repeat,repeat-x,repeat-y,repeat.
图形裁剪：在画布内使用路径，只绘制路径包括的区域。
创建好路径后调用context.clip()来实现。
像素处理：getImageData获取图像中的像素。
var imagedata=context.getImageData(sx,sy,sw,sh);//参数为起点坐标，获取区域宽度和高度。
imagedata是一个CanvasPixelArray对象，有height,width,data等属性，data是一个数组
putImagData(imagedata,dx,dy[,dirtyX,dirtyY,dirtyWidth,dirtyHeight]);重新绘制在画板上。
只有部分浏览器支持。
8、绘制文字
fillText(text,x,y,[maxWidth]);
strokeText
文字属性：
font:字体,如contet.font="italic 30px sans-serif"
textAlign:水平对齐方式，start(默认),end,left,right,center.
textBaseline:垂直对齐方式，top,hanging,middle,alphabetic(默认),ideographic,bottom.
获取文字的宽度：metrics=context.measureText(text); metrics的width表示text文字总文字宽度。
9、补充
保存与恢复状态：
save,restore分别保存与恢复图形上下文的当前会话状态。
保存文件：
把当前会话状态输出到一个data URL地址所指向的数据中。
canvas.toDataURL(type);//type为要输出数据的MIME类型。
简单动画的制作：实际是一个不断擦除,重绘的过程。
编写绘图函数，在函数中调用clearRect方法擦除。
用setInterval调用绘图函数。
