当前位置

网站首页> 程序设计 > 开源项目 > 程序开发 > 浏览文章

HTML5 canvas drawImage() 方法记录

作者:小梦 来源: 网络 时间: 2024-05-24 阅读:

浏览器支持

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

定义和用法

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标识的参数)。

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

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

热点阅读

网友最爱