drawImage函数参数意义及作用过程

weixin_43283426

于 2019-04-05 10:38:55 发布

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： canvas HTML

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/weixin_43283426/article/details/89040906

本文详细介绍了Canvas中drawImage方法的使用技巧，包括如何通过不同参数实现图片的精确裁剪、缩放和平移显示等效果。这对于希望掌握网页图像处理细节的前端开发者来说是一篇实用指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

drawImage(pic.png,sourceX,sourceY,width,height,showX,showY,swidth,sheight)
1.首先加载图片到坐标原点（相对平移后的坐标原点，所以当想实现移动效果时，需要不断更改坐标原点坐标）
2.sourceX与sourceY是相对于坐标原点的坐标，作用于加载的图片上
3.width与height是从图片上截取一个矩形（相对于sourceX,sourceY）
4showX,showY是相对于坐标原点的坐标，用于定位要显示的左上角
5.swidth与sheight用于将从图片中截取的图像按指定宽高度显示

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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