首页  >  文章  >  web前端  >  HTML5 canvas 9绘制图片实例详解

HTML5 canvas 9绘制图片实例详解

高洛峰
高洛峰原创
2017-01-11 17:00:171371浏览

绘制图片

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绘制图片实例详解

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

Context.fillStyle=pat;

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

图片裁剪

HTML5 canvas 9绘制图片实例详解

先绘制好路径

 

Context.clip();


 
 
 
 绘制图片
 
 
 
 
 
 
  
 
 
 

更多HTML5 canvas 9绘制图片实例详解相关文章请关注PHP中文网!


声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn