·您当前的位置:首页 > 技术教程 > Html5技术 >

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

时间:2016-06-17 10:49酷播
[html5]html5绘制、平铺、裁剪图像

绘制、平铺、裁剪图像

  1. context.drawImage(image,x,y); 
  2. context.drawImage(image,x,y,w,h); 
  3. context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);sx,sy和sw,sh为源图像的被复制区域的起始坐标和高度,dx,dy和dw,dh为复制后的区域的目标坐标和高度。 
  4. context.createPattern(image,type);图像平铺,参数可以为:no-repeat,repeat-x,repeat-y,repeat; 
  5. context.clip(); //裁剪功能 
  6.  
  7. 例子: 
  8. image=new Image(); //创建Image对象 
  9. image.src="../images/wukong.gif"
  10. var test=context.createPattern(image,'repeat-y');//createPattern设置平铺效果, 
  11. context.fillStyle=test
  12. context.fillRect(0,0,400,400); 
  13.  
  14. image.onload=function() { //此方法的作用是,如果图片是比较大的网络图像文件,防止图像全部装载完毕才看见该图像,这样就可以一边装载一边绘制了。 
  15. drawImg(context,image); 
  16. function drawImg(context,image){ 
  17. //绘制原始图像 
  18. context.drawImage(image,10,10,125,125); 
  19. //局部放大 
  20. context.drawImage(image,20,0,90,100,150,10,125,125); 
  21.  
  22. context.rect(20,20,80,80); 
  23. context.clip(); 
  24. context.drawImage(image,0,0,200,200); 

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器