canvas的drawImage方法参数详解

HTML5中引入新的元素canvas,其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。drawImage函数有三种函数原型:

drawImage(image, dx, dy) 在画布指定位置绘制原图
drawImage(image, dx, dy, dw, dh) 在画布指定位置上按原图大小绘制指定大小的图
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 剪切图像,并在画布上定位被剪切的部分:

参数描述
img规定要使用的图像、画布或视频
sx可选。开始剪切图片的 x 坐标位置
sy可选。开始剪切图片的 y 坐标位置
sw可选。被剪切图像的宽度(就是裁剪之前的图片宽度,这里的宽度若小于图片的原宽。则图片多余部分被剪掉;若大于,则会以空白填充)
sh可选。被剪切图像的高度(就是裁剪之前的图片高度)
dx在画布上放置图像的 x 坐标位置
dy在画布上放置图像的 y 坐标位置
dw可选。要使用的图像的宽度(就是裁剪之后的图片高度,放大或者缩放)
dh可选。要使用的图像的高度(就是裁剪之后的图片高度,放大或者缩放)

第一个参数image可以用HTMLImageElement,HTMLCanvasElement或者HTMLVideoElement作为参数。dx和dy是image在canvas中定位的坐标值;dw和dh是image在canvas中即将绘制区域(相对dx和dy坐标的偏移量)的宽度和高度值;sx和sy是image所要绘制的起始位置,sw和sh是image所要绘制区域(相对image的sx和sy坐标的偏移量)的宽度和高度值。

 

drawImage.png



作者:Harlen_luan
链接:https://www.jianshu.com/p/ded27b13c230
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

JEECG官方博客 CSDN认证博客专家 机器学习 深度学习 开源达人
专注技术开源,打造开源的JAVA快速开发平台—JEECG(获得CSDN专家访谈,ITEYE访谈、连续五年中国最火TOP5、十大优秀开源项目等)、免费微信管家平台—JeeWx 捷微(获得2014年微信开发商大会第一名)
已标记关键词 清除标记
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值