今天看个图片局部查看的效果:

图片局部查看效果 gif 图片局部查看效果

如果是在电脑上,在图片任意位置按住鼠标,然后拖动就可以触发这种局部查看效果;在手机上就直接在图片上点击然后移动就可以触发。

这种效果,主要实现准备好两张一样,但是画面不同的图片。我这里是一张正常的图,和一张漫画化后的图片,在正常的图片上移动,可以查看相同部位漫画化的效果。

实现方式,这里做了div和canvas两版本的,看看各自是如何实现的。

div实现

div实现移动靠的是当前触点减去半径,得到计算圆形左上角位置坐标;背景图片则是当前圆形左上角和容器左上角位置之差。图形表示大致如下:

background Layer 1 r x y r x y 1.当前屏幕触点(x,y) x-r y-r 2.让圆心移动到触点, 那么左上角位置(x-r,y-r) -(x-r) -(y-r) 3.背景图片相当于圆左上角 移动[-(x-r),-(y-r)]得到

canvas实现

canvas实现相对简单一些,不用计算背景的相对位置,但是圆形当前位置还是要计算,背景的透视主要是通过globalCompositeOperation去设置,destination-atop是显示相交部分的区域。

移动的时候,每次都要重新绘制背景和圆形,这样显示的才始终是一个圆形:

如果移动的时候,设置globalCompositeOperation为destination-out且不刷新圆形,那么就是刮刮乐效果:

DEMO下载

点击下载 [0积分]一共下载0

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字