大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

drawImage函数如何绘制图片-创新互联

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

10年积累的网站设计、成都网站制作经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先制作网站后付款的网站建设流程,更有涵江免费网站建设让你可以放心的选择与我们合作。

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

drawImage函数如何绘制图片

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

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

方法一:

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

drawImage(image, x, y)

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

效果图:

drawImage函数如何绘制图片

方法二:

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

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

例:设置图像的尺寸

效果图:

drawImage函数如何绘制图片

方法三:

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

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

例:对图片进行裁剪

效果图:

drawImage函数如何绘制图片

关于drawImage函数如何绘制图片就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


本文名称:drawImage函数如何绘制图片-创新互联
网站链接:http://dzwzjz.com/article/dgcogc.html
在线咨询
服务热线
服务热线:028-86922220
TOP