drawImage函数绘制图片是什么办法

drawImage函数绘制图片有三种办法离别为：按原图片的大小停止绘制、依照所指定的大小停止绘制、通用办法一样可用于图片裁剪

今天将介绍canvas中的drawImage函数的用途，具有必然的参照 作用，但愿对大家有所帮忙

【引荐课程：HTML5教程】

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函数的办法。

以上就是drawImage函数绘制图片是什么办法的具体内容，更多请关注百分百源码网其它相关文章！