当前位置：Gxlcms > html代码 > 用HTML5实现橡皮擦的涂抹效果的教程_html5教程技巧

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

时间：2021-07-01 10:21:17 帮助过：34人阅读

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

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

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