如何使用canvas实现图片的放大缩小？

问题描述

问 题

http://img1.yueyaa.com/show.p...
实现这样的效果

解决方案

使用ctx.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)可以实现图片的放大缩小功能，它接收9个参数，分别为

• image object

• 原图x坐标

• 原图y坐标

• 原图宽度

• 原图高度

• 画布x坐标

• 画布y坐标

• 绘制图片的宽度

• 绘制图片的高度

dWidth > sWidth && dHeight > sHeight 绘制的是放大的图片

dWidth < sWidth && dHeight < sHeight 绘制的是缩小的图片

• 图片缩放 demo

这篇关于如何使用canvas实现图片的放大缩小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！