登录  /  注册
首页 > web前端 > H5教程 > 正文

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

php中文网
发布： 2016-05-16 15:46:37
原创
1956人浏览过

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

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

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

XML/HTML Code复制内容到剪贴板
  1. ctx.save()   
  2. ctx.beginPath()   
  3. ctx.arc(x2,y2,a,0,2*Math.PI);   
  4. ctx.clip()   
  5. ctx.clearRect(0,0,canvas.width,canvas.height);   
  6. ctx.restore();   

　　上面那段代码就实现了圆形区域的擦除，也就是先实现一个圆形路径，然后把这个路径作为剪辑区域，再清除像素就行了。有个注意点就是需要先保存绘图环境，清除完像素后要重置绘图环境，如果不重置的话以后的绘图都是会被限制在那个剪辑区域中。

　　擦除效果有了，现在就是写鼠标移动擦除的效果了，下面我均用鼠标来描述，因为移动端也差不多，就是把mousedown换成touchstart，mousemove换成touchmove，mouseup换成touchend、以及获取坐标点由e.clientX换成e.targetTouches[0].pageX而已。

　　实现鼠标移动擦除，刚开始就是想到鼠标移动时在触发的mousemove事件中对鼠标所在位置进行圆形区域擦除，写出来后发现，当鼠标移动速度很快的时候，擦除的区域就不连贯了，就会出现下面这种效果，这显然不是我们想要的橡皮擦擦除效果。
2015511163949198.jpg (1103×693)

既然所有点不连贯，那接下来要做的事就是把这些点连贯起来，如果是实现画图功能的话，就可以直接通过lineTo把两点之间连接起来再绘制，但是擦除效果中的剪辑区域要求要是闭合路径，如果是单纯的把两个点连起来就无法形成剪辑区域了。然后我就想到用计算的方法，算出两个擦除区域中的矩形四个端点坐标来实现，也就是下图中的红色矩形：
2015511164105508.png (343×129)

计算方法也很简单，因为可以知道两个剪辑区域连线两个端点的坐标，又知道我们要多宽的线条，矩形的四个端点坐标就变得容易求了，所以就有了下面的代码：
XML/HTML Code复制内容到剪贴板

  1. var aasin = a*Math.sin(Math.atan((y2-y1)/(x2-x1)));   
  2. var aacos = a*Math.cos(Math.atan((y2-y1)/(x2-x1)))   
  3. var x3 = x1+asin;   
  4. var y3 = y1-acos;   
  5. var x4 = x1-asin;   
  6. var y4 = y1+acos;   
  7. var x5 = x2+asin;   
  8. var y5 = y2-acos;   
  9. var x6 = x2-asin;   
  10. var y6 = y2+acos;   

　　x1、y1和x2、y2就是两个端点，从而求出了四个端点的坐标。这样一来，剪辑区域就是圈加矩形，代码组织起来就是：
XML/HTML Code复制内容到剪贴板

  1. var hastouch = "ontouchstart" in window?true:false,//判断是否为移动设备   
  2.     tapstart = hastouch?"touchstart":"mousedown",   
  3.     tapmove = hastouch?"touchmove":"mousemove",   
  4.     tapend = hastouch?"touchend":"mouseup";   
  5.   
  6. canvas.addEventListener(tapstart , function(e){   
  7.     e.preventDefault();   
  8.        
  9.     x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;   
  10.     y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;   
  11.        
  12. 　　//鼠标第一次点下的时候擦除一个圆形区域，同时记录第一个坐标点   
  13.     ctx.save()   
  14.     ctx.beginPath()   
  15.     ctx.arc(x1,y1,a,0,2*Math.PI);   
  16.     ctx.clip()   
  17.     ctx.clearRect(0,0,canvas.width,canvas.height);   
  18.     ctx.restore();   
  19.        
  20.     canvas.addEventListener(tapmove , tapmoveHandler);   
  21.     canvas.addEventListener(tapend , function(){   
  22.         canvas.removeEventListener(tapmove , tapmoveHandler);   
  23.     });   
  24. 　　//鼠标移动时触发该事件   
  25.     function tapmoveHandler(e){   
  26.         e.preventDefault()   
  27.         x2 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;   
  28.         y2 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;   
  29.            
  30. 　　　　//获取两个点之间的剪辑区域四个端点   
  31.         var aasin = a*Math.sin(Math.atan((y2-y1)/(x2-x1)));   
  32.         var aacos = a*Math.cos(Math.atan((y2-y1)/(x2-x1)))   
  33.         var x3 = x1+asin;   
  34.         var y3 = y1-acos;   
  35.         var x4 = x1-asin;   
  36.         var y4 = y1+acos;   
  37.         var x5 = x2+asin;   
  38.         var y5 = y2-acos;   
  39.         var x6 = x2-asin;   
  40.         var y6 = y2+acos;   
  41.            
  42. 　　　　//保证线条的连贯，所以在矩形一端画圆   
  43.         ctx.save()   
  44.         ctx.beginPath()   
  45.         ctx.arc(x2,y2,a,0,2*Math.PI);   
  46.         ctx.clip()   
  47.         ctx.clearRect(0,0,canvas.width,canvas.height);   
  48.         ctx.restore();   
  49.        
  50. 　　　　//清除矩形剪辑区域里的像素   
  51.         ctx.save()   
  52.         ctx.beginPath()   
  53.         ctx.moveTo(x3,y3);   
  54.         ctx.lineTo(x5,y5);   
  55.         ctx.lineTo(x6,y6);   
  56.         ctx.lineTo(x4,y4);   
  57.         ctx.closePath();   
  58.         ctx.clip()   
  59.         ctx.clearRect(0,0,canvas.width,canvas.height);   
  60.         ctx.restore();   
  61.            
  62. 　　　　//记录最后坐标   
  63.         x1 = x2;   
  64.         y1 = y2;   
  65.     }   
  66. })  

　　如此一来，鼠标擦除的效果就实现了，不过还有一个要实现的点，就是大部分擦除的效果，当你擦了一定数量的像素后，就会自动把所有图片内容呈现出来，这个效果，我是用imgData来实现的。代码如下：
复制代码

XML/HTML Code复制内容到剪贴板
  1. var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);   
  2. var dd = 0;   
  3. for(var x=0;ximgData.width;x+=1){   
  4.     for(var y=0;yimgData.height;y+=1){   
  5.         var i = (y*imgData.width + x)*4;   
  6.         if(imgData.data[i+3] > 0){   
  7.             dd++   
  8.         }   
  9.     }   
  10. }   
  11. if(dd/(imgData.width*imgData.height)0.4){   
  12.     canvas.className = "noOp";   
  13. }  

　　获取到imgData，对imgData里的像素进行遍历，然后再对imgData的data数组里的rgba中的alpha进行分析，也就是分析透明度，如果像素被擦除了，那透明度就是0了，也就是把当前画布中透明度不为0的像素的数量跟画布总像素数进行比较，如果透明度不为0 的像素数比例低于40%，那说明当前画布上就以后有百分六十以上的区域被擦除了，就可以自动呈现图片了。

　　此处注意，我是把检查像素这段代码方法mouseup事件里面的，因为这个计算量相对来说还是不小，如果用户狂点鼠标，就会狂触发mouseup事件，也就是会疯狂的触发那个循环计算像素，计算量大到阻塞进程，导致界面卡住的情况，缓解办法如下：加个timeout，延迟执行像素计算，而在每一次点击的时候再清除timeout，也就是如果用户点击很快，这个计算也就触发不了了，还有一个提升的办法就是抽样检查，我上面的写法是逐个像素检查，逐个像素检查的话像素量太大，肯定会卡的，所以可以采用抽样检查，比如每隔30个像素检查一次，修改后的代码如下：
复制代码

XML/HTML Code复制内容到剪贴板
  1. timeout = setTimeout(function(){   
  2.     var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);   
  3.     var dd = 0;   
  4.     for(var x=0;ximgData.width;x+=30){   
  5.         for(var y=0;yimgData.height;y+=30){   
  6.             var i = (y*imgData.width + x)*4;   
  7.             if(imgData.data[i+3] >0){   
  8.                 dd++   
  9.             }   
  10.         }   
  11.     }   
  12.     if(dd/(imgData.width*imgData.height/900)0.4){   
  13.         canvas.className = "noOp";   
  14.     }   
  15. },100)   

　　这样就可以较大限度的防止用户狂点击了，如果有其他更好的检查方法欢迎给出意见，谢谢。

　　到了这一步就都写完了，然后就是测试的时候了，结果并不乐观，在android上还是卡啊卡啊，所以又得另想办法，最终发现了绘图环境中的globalCompositeOperation这个属性，这个属性的默认值是source-over，也就是，当你在已有像素上进行绘图时会叠加，但是还有一个属性是destination-out，官方解释就是：在源图像外显示目标图像。只有源图像外的目标图像部分才会被显示，源图像是透明的。好像不太好理解，但是其实自己测试一下就会发现很简单，也就是在已有像素的基础上进行绘图时，你绘制的区域里的已有像素都会被置为透明，直接看张图更容易理解：
2015511164219714.jpg (553×390)

globalCompositeOperation属性效果图解。
有了这个属性后，就意味着不需要用到clip，也就不需要用sin、cos什么的计算剪辑区域，直接用条粗线就行了，这样一来就能够很大限度的降低了计算量，同时减少了绘图环境API的调用，性能提升了，在android上运行应该也会流畅很多，下面是修改后的代码：


XML/HTML Code复制内容到剪贴板
  1. //通过修改globalCompositeOperation来达到擦除的效果   
  2. function tapClip(){   
  3.     var hastouch = "ontouchstart" in window?true:false,   
  4.         tapstart = hastouch?"touchstart":"mousedown",   
  5.         tapmove = hastouch?"touchmove":"mousemove",   
  6.         tapend = hastouch?"touchend":"mouseup";   
  7.        
  8.     canvas.addEventListener(tapstart , function(e){   
  9. 　　　　 clearTimeout(timeout)   
  10.         e.preventDefault();   
  11.            
  12.         x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;   
  13.         y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;   
  14.            
  15.         ctx.lineCap = "round";　　//设置线条两端为圆弧   
  16.         ctx.lineJoin = "round";　　//设置线条转折为圆弧   
  17.         ctx.lineWidth = a*2;　　   
  18.         ctx.globalCompositeOperation = "destination-out";   
  19.            
  20.         ctx.save();   
  21.         ctx.beginPath()   
  22.         ctx.arc(x1,y1,1,0,2*Math.PI);   
  23.         ctx.fill();   
  24.         ctx.restore();   
  25.            
  26.         canvas.addEventListener(tapmove , tapmoveHandler);   
  27.         canvas.addEventListener(tapend , function(){   
  28.             canvas.removeEventListener(tapmove , tapmoveHandler);   
  29.                
  30. 　　　　　　　timeout = setTimeout(function(){   
  31.             var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);   
  32.             var dd = 0;   
  33.             for(var x=0;ximgData.width;x+=30){   
  34.                 for(var y=0;yimgData.height;y+=30){   
  35.                     var i = (y*imgData.width + x)*4;   
  36.                     if(imgData.data[i+3] > 0){   
  37.                         dd++   
  38.                     }   
  39.                 }   
  40.             }   
  41.             if(dd/(imgData.width*imgData.height/900)0.4){   
  42.                 canvas.className = "noOp";   
  43.             }   
  44. 　　　　　　　},100)   
  45.         });   
  46.         function tapmoveHandler(e){   
  47.             e.preventDefault()   
  48.             x2 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;   
  49.             y2 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;   
  50.                
  51.             ctx.save();   
  52.             ctx.moveTo(x1,y1);   
  53.             ctx.lineTo(x2,y2);   
  54.             ctx.stroke();   
  55.             ctx.restore()   
  56.                
  57.             x1 = x2;   
  58.             y1 = y2;   
  59.         }   
  60.     })   
  61. }   

　　擦除那部分代码就这么一点，也就相当于画图功能，直接设置line属性后通过lineTo进行绘制线条，只要事前把globalCompositeOperation设成destination-out，你所进行的一切绘制，都变成了擦除效果。鼠标滑动触发的事件里面代码也少了很多，绘图对象的调用次数减少了，计算也减少了，性能提升大大滴。

　　改好代码后就立即用自己的android机子测试了一下，果然如此，跟上一个相比，流畅了很多，至少达到了客户要求的能玩的地步了。

　　源码地址：https://github.com/whxaxes/canvas-test/blob/gh-pages/src/Funny-demo/clip/clip.html

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题，提供实时的代码和解决方案，帮助你解决各种难题。不仅如此，它还能提供编程资源和学习指导，帮助你快速提升编程技能。无论你是初学者还是专业人士，AI智能助手都能成为你的可靠助手，助力你在编程领域取得更大的成就。
我要提问
来源：php中文网
收藏 点赞
上一篇：举例详解HTML5中使用JSON格式提交表单_html5教程技巧 下一篇：用HTML5中的Canvas结合公式绘制粒子运动的教程_html5教程技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
关于CSS思维导图的课件在哪？ 课件
凡人来自于2024-04-16 10:10:18
0 0 103
PX自动转换为REM错误  <style>html {   font-size: calc(100vw / 3.75);      }...
凡人来自于2024-04-16 09:34:16
0 0 489
PHP数组从URL参数中获取的行为不如预期 我有一个包含类别ID的URL参数，我想将其视为一个数组，如下所示：http://example.com?cat[]=3,9,13在PHP中，我使用它从URL参数获取数组：$catI...
P粉785905797来自于2024-04-06 22:09:02
0 1 413
通过添加 Width 属性将内容向左移动 我已经为主体提供了边距。主要{左边缘：200px;右边距：200px；文本对齐：居中}由于我想以两行而不是一行显示文本，因此我在样式中添加了width属性。.p{字体大小：12px...
P粉738046172来自于2024-04-06 22:01:35
0 2 302
我应该在 apache 中哪里放置 CustomLog 指令 我正在使用php:7.2-apachedocker。我需要禁用运行状况检查url登录访问日志。基于此链接，他们提到了有关修改Customlog指令的信息。我不是关于需要更改Cust...
P粉573809727来自于2024-04-06 22:03:59
0 1 434
返回值中变量的格式是什么？ 我是php的新学习者。我发现有一段代码：if($x<time()){return[false,'error'];}逻辑或变量并不重要，但我不明白[false,'error']...
P粉757556355来自于2024-04-06 21:55:20
0 1 258
页面突然无法拉动 css 或 bootstrap 所以我正在开发一个页面，我昨天做了一部分，效果很好，今天我继续做剩下的部分，一切都很好。当我尝试将其作为普通html页面打开时，CSS或BOOTSTRAP不起作用，仅显示页面文本，...
P粉771233336来自于2024-04-06 21:58:04
0 1 348
如何在 React 中的排序方法上触发渲染（带有过滤器和分页）？ 这是我的Sort.js样式组件：<SortWrapper><SortText>SortBy</SortText><SortSelecton...
P粉970736384来自于2024-04-06 21:28:37
0 1 1857
将将类的私有成员设置为构造函数参数 classFoo{#one#two#three#four#five#six#seven#eight#nine#ten#eleven#twelve#thirteen#fourteen...
P粉761718546来自于2024-04-06 21:48:47
0 1 255
如何从结果集中仅显示最低值（MYSQL） 我有以下声明：selectDATE(recieved_on)asDay,round(count(*)/24)AS'average'frommessagewherefacilityi...
P粉338969567来自于2024-04-06 21:44:19
0 1 239
相关专题
更多>
热门推荐
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部