今天将介绍canvas中的drawImage函数的用法,具有一定的参考作用,希望对大家有所帮助
【推荐课程:HTML5教程】
drawImage函数是HTML5中的一个新元素canvas标签中的一个方法,它主要是用于画图、合成图象、或做简单的动画等
方法一:
第一种方法就是将整个图像复制到画布,并将其放置到指定点的左上角,并且将每个图像像素映射成画布坐标系统的一个单元。即将按原图片的大小进行绘制
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.jb51.cc/html/1207611.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。