drawImage函数如何绘制图片

这篇文章将为大家详细讲解有关drawImage函数如何绘制图片，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

为山城等地区用户提供了全套网页设计制作服务，及山城网站建设行业解决方案。主营业务为网站设计、网站建设、山城网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

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

drawImage函数是HTML5中的一个新元素canvas标签中的一个方法，它主要是用于画图、合成图象、或做简单的动画等

drawImage() 方法有三种形式实现绘图的效果

方法一：

第一种方法就是将整个图像复制到画布，并将其放置到指定点的左上角，并且将每个图像像素映射成画布坐标系统的一个单元。即将按原图片的大小进行绘制

drawImage(image, x, y)

例：将图像相对于左上角的位置来画在画布上

<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>

效果图：

方法二：

第二种方法虽然也是将整个图像复制到画布中，但是它允许我们用画布单位来指定想要的图像的宽度和高度。

drawImage(image, x, y, width, height)

例：设置图像的尺寸

<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函数如何绘制图片
标题路径：https://www.cdcxhl.com/article8/ghcgop.html

成都网站建设公司_创新互联，为您提供微信小程序、虚拟主机、全网营销推广、网页设计公司、域名注册、动态网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联