HTML5 canvas 9绘制图片实例详解

绘制图片

Var image=new Image();

image.src=” http://img4.duitang.com/uploads/item/201406/25/20140625182321_4MTau.thumb.700_0.jpeg”;

image.onload=function(){}

Context.drawImage(image,x,y);

Context.drawImage(image,x,y,w,h);

Context.drawIamge(image,sx,sy,sw,sh,dx,dy,dw,dh);

图片平铺

HTML5 canvas 9绘制图片实例详解_第1张图片

Var pat= context.createPattern(image,”repeat”);

Context.fillStyle=pat;

Context.fillRect(0,0,400,300);

图片裁剪

HTML5 canvas 9绘制图片实例详解_第2张图片

先绘制好路径

 

Context.clip();



 
 
 绘制图片
 

 

 
 
 
 
 





你可能感兴趣的:(HTML5 canvas 9绘制图片实例详解)