[html5]html5绘制、平铺、裁剪图像

绘制、平铺、裁剪图像

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); 
}