资讯专栏INFORMATION COLUMN

HTML5 canvas drawImage() 方法记录

Cheriselalala / 454人阅读

摘要:浏览器支持以及支持方法。定义和用法方法在画布上绘制图像画布或视频。方法也能够绘制图像的某些部分,以及或者增加或减少图像的尺寸。图像中,被截取的区域的宽度。

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 drawImage() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 元素。

定义和用法

drawImage() 方法在画布上绘制图像、画布或视频。
drawImage() 方法也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸。

JavaScript 语法 1

在画布上定位图像:

context.drawImage(img,sx,sy);

此时其他的默认值为:
swidth:画布宽度
sheight:width/swidth*height
x:0
y:0
width:图像的naturalWidth
height:图像的naturalHeight

JavaScript 语法 2

在画布上定位图像,并规定图像的宽度和高度:

context.drawImage(img,sx,sy,swidth,sheight);

此时其他的默认值为:
x:0
y:0
width:图像的naturalWidth
height:图像的naturalHeight

JavaScript 语法 3

剪切图像,并在画布上定位被剪切的部分:

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数值

img:规定要使用的图像、画布或视频。
sx:可选。画布中被绘制的区域的左上角的点的 x 值。
sy:可选。同上的 y 值。
swidth:可选。画布中被绘制的区域的宽度。
sheight:可选。同上的高度。
x:图像中,被选取的区域的左上角的点的 x 值。
y:同上的 y 值。
width:可选。图像中,被截取的区域的宽度。
height:可选。同上的高度。

参数使用原理:参数分为3部分,一部分描述图像数据源,一部分描述从数据源中截取的区域(参数前无s标识的参数),一部分描述在画板中绘制的区域(参数前有s标识的参数)。

简单来讲,此方法将从图像中截取一个矩形区域来画到画板中的一个矩形区域,如果两个矩形区域的数值不一样,将对图像进行缩放,甚至拉伸。

延伸使用方法:如果设置的画板区域比画板本身要大的时候,依然会按照上面的方式,把图像延伸到画板外,但是,在画板外的图像是不会绘制出来的。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/85928.html

相关文章

  • HTML5 Canvas绘图详解 drawImage() 方法

    摘要:最常见的在上画图的方法是使用对象。在下面的所有例子中,图片源将会使用这张尺寸的图片。图像的位置是相对于其左上角来判断的。代码如下图片裁剪方法的功用是对图像进行裁剪。代码如下这些就是中的画布标记里进行绘图和处理图像的基本操作。 简介是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动...

    wanglu1209 评论0 收藏0

发表评论

0条评论

Cheriselalala

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<