24个canvas基础知识小结

　　(5) setTransform(<number>, <number>, <number>,<number>,x, y);将变换矩阵重置为默认状态，然后再调用transform();

20、图形组合

复制代码
context.fillStyle="blue";
context.fillRect(10,10,100,100);
context.globalCompositeOperation='lighter'; 可选值如/* */内。
context.fillStyle="red";
context.arc(110,60,50,0,Math.PI*2,false);
context.fill();
/*
source-over(默认值)：
destination-over：在原有图形之下绘制新图形
source-in：新图形与原有图形作in运算，只显示新图形中与原有图形相重叠的部分
destination-in：原有图形与新图形作in运算，只显示新图形中与原有图形相重叠的部分
source-out：新图形与原有图形作out运算，只显示新图形中与原有图形不重叠的部分
destination-out：新图形与原有图形作out运算，只显示新图形中与原有图形不重叠的部分
source-atop：只绘制新图形中与原有图形重叠的部分和未被重叠的原有图形
destination-atop：只绘制原有图形中被新图形重叠的部分和新图形的其他部分
lighter：原有图形与新图形均绘制，重叠部分做加色处理
xor：只绘制新图形与原有图形不重叠的部分，重叠部分变透明
copy：只绘制新图形
*/

21、绘制图形阴影

复制代码
context.shadowOffsetX=10; //阴影的横向位移量
context.shadowOffsetY=10; //阴影的纵向位移量
context.shadowColor='rgba(100,100,100,0.5)'; //阴影的颜色
context.shadowBlur=7; //阴影的模糊范围

22、绘制、平铺、裁剪图像

复制代码
context.drawImage(image,x,y);
context.drawImage(image,x,y,w,h);
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);sx,sy和sw,sh为源图像的被复制区域的起始坐标和高度，dx,dy和dw,dh为复制后的区域的目标坐标和高度。
context.createPattern(image,type);图像平铺，参数可以为：no-repeat,repeat-x,repeat-y,repeat;
context.clip(); //裁剪功能

例子：

复制代码
image=new Image(); //创建Image对象
image.src="../images/wukong.gif";
var test=context.createPattern(image,'repeat-y');//createPattern设置平铺效果，
context.fillStyle=test;
context.fillRect(0,0,400,400);
image.onload=function() { //此方法的作用是，如果图片是比较大的网络图像文件，防止图像全部装载完毕才看见该图像，这样就可以一边装载一边绘制了。
drawImg(context,image);
}
function drawImg(context,image){
//绘制原始图像
context.drawImage(image,10,10,125,125);
//局部放大
context.drawImage(image,20,0,90,100,150,10,125,125);
context.rect(20,20,80,80);
context.clip();
context.drawImage(image,0,0,200,200);
}