1.jquery的使用(jquery对dom模型的操作)
<head>
<---!css代码段--->
<script src="jqurey.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){//$是jquery的简写
//js代码段
});
</script>
</head>
2.用jquery获取canvas元素
...
var canvas=$(#canvasid);
var context=canvas.get(0).getContext("2d");
...
3.canvas基础的内置方法：
填充区域：fillRect(x,y,width,height);
画边框：strokeRect(x,y,width,height);
路径：beginPath();
. ....
closePath();
strokeRect(....);
直线：moveTo(x,y);
lineTo(x,y);
圆形：arc(x,y,r,begindegree,enddegree,true/false);
填充图片文字：fillText(text,x,y);
清空区域：clearRect(x,y,width,height);
风格变换：
线型:lineWidth=number;
字形:font="italic 30px serif"
填充风格:fillStyle="rgb(255,255,255)"
描边风格:strokeStyle=“rgb(255,255,255)”
全屏刷黑技巧：
canvas.attr("width",$(window).get(0).innerWidth);
canvas.attr("height",$(window).get(0).innerHeight);
context.fillRect(0,0,canvas.width(),canvas.height());
4.canvas的高级特性
注意以下这些特性（变形）都是针对整张画布的
保存绘图状态:save();//将绘图状态进栈
恢复绘图状态:restore();
原点平移:translate(x,y);
缩放:scale(x,y);
旋转:rotate(弧度值);
变换矩阵:transform(a,b,c,d,e,f);
a c e ——>坐标变换矩阵
b d f
0 0 1
全局阿尔法值（透明度）:globalAlpha=0.0~1.0
图形合成全局项：globalCompositeOperation=""
——源/目标叠在上层:source/destination-over
——源/目标重叠部分显示，源/目标非重叠部分透明掉:source/destination-atop
——源/目标 只显示其交集部分的源/目标，其余部分透明:source/destination-in
——源/目标 只显示其交集部分透明，显示源/目标的其余部分:source/destination-out
——源与目标交集部分rgb值相加:lighter
——只绘制源，覆盖掉目标:copy
——异或:xor
阴影：
shadowColor="rgb(x,x,x)"
shadowBlur=像素值（模糊阴影）
shadowOffsetX=像素值（阴影x轴方向上偏移）
shadowOffsetY=像素值（阴影y轴方向上偏移）
渐变:
——线性渐变:
var gradient=context.createLinearGradient(起始x坐标,起始y坐标,终点x坐标,终点y坐标)；
gradient.addColorStop(0,"rgb(x,x,x)");//起点颜色
gradent.addColorStop(1,"rgb(x,x,x)");//终点颜色
context.fillStyle=gradient;
放射渐变:
var gradient=context.createRadialGradient(x0,y0,r0,x1,y1,r1);//0为起始圆，1为终点圆
...//起点颜色终点颜色参见线性渐变。
如果起始圆和终止圆是同心圆可做出同心放射效果。 (canvasCentreX,canvasCentreY可取canvas画布实例的圆心)。
复杂路径:
多边形：context.beginPath();
context.moveTo(x0,y0);
context.lineTo(x1,y1);
context.lineTo(x2,y2);
....
context.closePath();
贝塞尔曲线：
2次：context.beginPath();
context.moveTo(x,y);
context.quadraticCurveTo(x,y,cpx,cpy);
context.stroke();
3次：context.bezierCurveTo(x,y,cpx1,cpy1,cpx2,cpy2);
chorm和ie的画布图片导出：
var dataURL=canvas.get(0).toDataURL();
var img=$("");//使用jQuery创建一个元素
img.attr("src",dataURL);//jQuery对元素的设置
canvas.replaceWith(img);//canvas对象自带的替换方法，把...替换为...