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

来源：懂视网责编：小采时间：2020-11-27 15:19:29

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

用HTML5实现橡皮擦的涂抹效果的教程_html5教程技巧:最近项目刚好用到这种效果，也就是有点像刮刮卡一样，在移动设备上，把某张图片刮掉显示出另一张图片。效果图如下： DEMO请戳右：DEMO 这种在网上还是挺常见的，本来就想直接网上找个demo套用下他的方法就行了，套用了才发现，在android上卡出翔了，因为客户

推荐度：

点击下载本文 文档为doc格式

导读用HTML5实现橡皮擦的涂抹效果的教程_html5教程技巧:最近项目刚好用到这种效果，也就是有点像刮刮卡一样，在移动设备上，把某张图片刮掉显示出另一张图片。效果图如下： DEMO请戳右：DEMO 这种在网上还是挺常见的，本来就想直接网上找个demo套用下他的方法就行了，套用了才发现，在android上卡出翔了，因为客户

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

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

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

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

推荐度：

点击下载本文 文档为doc格式

标签：教程实现效果

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐