首页 > 开发 > HTML5 > 正文

用HTML5 实现橡皮擦的涂抹效果的教程

2024-09-05 07:21:08
字体:
来源:转载
供稿:网友

最近项目刚好用到这种效果,也就是有点像刮刮卡一样,在移动设备上,把某张图片刮掉显示出另一张图片。效果图如下:
2015511163305472.png (974×840)

DEMO请戳右:DEMO 
这种在网上还是挺常见的,本来就想直接网上找个demo套用下他的方法就行了,套用了才发现,在android上卡出翔了,因为客户要求,在android不要求特别流畅,至少要能玩,但是网上找的那个demo实在太卡,根本就是没法玩的情况。于是就想自己写一个算了,本文也就权当记录一下研究过程。

  这种刮图的效果,首先想到就是用HTML5的canvas来实现,而canvas的API中,可以清除像素的就是clearRect方法,但是clearRect方法的清除区域矩形,毕竟大部分人的习惯中的橡皮擦都是圆形的,所以就引入了剪辑区域这个强大的功能,也就是clip方法。用法很简单: 

XML/HTML Code复制内容到剪贴板
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表