canvas 放大镜

采用canvas实现放大镜功能,只需要使用一个方法。。。

这个方法有三种使用情况:

1、drawImage(img,x,y)

三个参数,第一个参数当然是img元素了,也可以是video元素或者Image对象,x 、y 为图片绘制时在画布中的起始坐标,图像大小与原图相同。

2、drawImage(img , x , y , w , h)

与第一中情况相比,多了两个参数,分别代表所绘图像的宽度和高度。

3、drawImage(img , sx , sy , sw , sh , dx , dy , dw , dh);

9个参数,分别是:图像元素,被复制区域在原画布中的起始横坐标、被复制区域在原画布中的起始纵坐标、被复制区域的宽度、被复制区域的高度、复制后目标图像在画布中的起始横坐标、复制后目标图像在画布中的起始纵坐标、复制后目标图像的宽度、复制后目标图像的高度。
因此这种情况下可以将某幅图像的局部区域复制到另一个画布中的某个位置。

代码:

html 代码

» 本文来自:前端开发者 » 《canvas 放大镜》
» 本文链接地址:https://www.rokub.com/8838.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!