摘要:浏览器支持以及支持方法。定义和用法方法在画布上绘制图像画布或视频。方法也能够绘制图像的某些部分,以及或者增加或减少图像的尺寸。图像中,被截取的区域的宽度。
浏览器支持
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
摘要:最常见的在上画图的方法是使用对象。在下面的所有例子中,图片源将会使用这张尺寸的图片。图像的位置是相对于其左上角来判断的。代码如下图片裁剪方法的功用是对图像进行裁剪。代码如下这些就是中的画布标记里进行绘图和处理图像的基本操作。 简介是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动...
阅读 3499·2023-04-25 16:35
阅读 657·2021-10-11 11:09
阅读 5993·2021-09-22 15:11
阅读 3320·2019-08-30 14:03
阅读 2561·2019-08-29 16:54
阅读 3307·2019-08-29 16:34
阅读 2981·2019-08-29 12:18
阅读 2055·2019-08-28 18:31