当前位置:  首页  >  前端开发  >  HTML

drawImage函数绘制图片有哪些方法

drawImage函数绘制图片有三种方法分别为:按原图片的大小进行绘制、按照所指定的大小进行绘制、通用方法一般可用于图片裁剪
drawImage函数绘制图片有三种方法分别为:按原图片的大小进行绘制、按照所指定的大小进行绘制、通用方法一般可用于图片裁剪

今天将介绍canvas中的drawImage函数的用法,具有一定的参考作用,希望对大家有所帮助

《script》
var myImage=document.getElementById("myCanvas");
var cxt=myImage.getContext("2d");
var img=new Image();
img.src="images/22.jpg";
 img.onload=function(){
cxt.drawImage(img,150,150);
cxt.drawImage(img,250,250);
}
《script》

效果图:

《script》
var myImage=document.getElementById("myCanvas");
var cxt=myImage.getContext("2d");
var img=new Image();
img.src="images/22.jpg";
 img.onload=function(){
cxt.drawImage(img,150,150,100,100);
cxt.drawImage(img,250,250,100,100);
}
《script》

效果图:

方法三:

第三种方法是完全通用,它允许我们指定图像的任何矩形区域并复制它,以及对画布中的任何位置都可进行任何的缩放

drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)

例:对图片进行裁剪

《script》
var myImage=document.getElementById("myCanvas");
var cxt=myImage.getContext("2d");
var img=new Image();
img.src="images/22.jpg";
 img.onload=function(){
cxt.drawImage(img,20,30,50,50,25,25,100,100);
cxt.drawImage(img,115,115,100,100,125,125,200,200);
}
《script》

效果图:

总结:以上就是drawImage函数的用法了,希望通过这篇文章可以帮助大家学会drawImage函数的方法。

以上就是drawImage函数绘制图片有哪些方法的详细内容,更多请关注 第一PHP社区 其它相关文章!

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有