碎裂效果尝试(canvas篇)

时间：2015-05-26 23:21:40 阅读：478 评论：0 收藏：0 [点我收藏+]

标签：

为什么会有这篇博文，因为昨天我的杯子碎了，同个办公室的人手机屏幕碎了……碎碎平安

既然说的是碎裂效果，那什么是碎裂呢，看看生活中的

技术分享

总而言之就是完整的一块，碎成了好些块。

进入正题，canvas对于图像处理很强，毕竟直接操作像素，马赛克，翻转，二值化都很方便。但是经过我的一番尝试，说实话，canvas分割图像这方面还真挺麻烦的……

当然可能我的实现思路有问题，绕了弯，如果有更好地方法请指教，万分感激

讲了这么多，先看看几张gif，这样才有兴趣继续往下看嘛

技术分享

特地让其动了起来，录制gif有点卡，真实情况下还是很平滑的

什么，你问有什么用？

那么看下一个gif

技术分享

能看出来了吧，对于canvas上面所画的元素，可以让其碎成几块，然后进行移动，最后一个gif是简单裂图的，抛砖引玉一下

技术分享

好了效果看完了，如果感兴趣决定继续往下看那就继续吧~

————————————————————————————————————————————————————————————————————————

首先说原理，我实现的原理

核心是canvas中画布的clip方法，不知道的简单看一下w3school关于clip简短的介绍

http://www.w3school.com.cn/tags/canvas_clip.asp

其实这个很坑，怎么坑了？

这又要说canvas的绘图了，它不同于SVG，SVG画一个圆，是创建了一个circle的SVG标签，添加到DOM中，你可以获取到这个圆的DOM节点，可以用js去读它的信息和进行操作。而canvas不行，它画了一个圆，只是在其画布上进行了一个操作，画布还是整个画布，你若是想移动这个圆，必须通过一系列重绘这个圆的坐标实现，不过速度比SVG快，原因DOM的重新渲染很耗时间和内存。

把canvas这个特点带到clip中成了什么情况？还是拿圆来举例，画了一个圆

技术分享

我们用下clip看一下结果，下面是代码

oGC.save();
oGC.beginPath();
oGC.fillStyle = ‘red‘;　　//注意红色

oGC.moveTo(0, 400);
oGC.lineTo(300, 200);
oGC.lineTo(0, 0);
oGC.fill();　　//①

oGC.clip();
oGC.closePath();
oGC.restore();

技术分享

呵呵，果然canvas并不是把这个圆给切割开(看代码这种面向过程一顺溜下来也知道不关乎圆的事……)

仅仅获取到一个单独的操作区域，为什么说是单独的呢，代码和结果来解释

oGC.save();
oGC.beginPath();
oGC.fillStyle = ‘red‘;

oGC.moveTo(0, 400);
oGC.lineTo(300, 200);
oGC.lineTo(0, 0);
oGC.fill();

oGC.clip();
oGC.closePath();

oGC.fillStyle = ‘green‘;    //注意这个绿色
oGC.fillRect(100, 100, 200, 200);

oGC.restore();

结果如下

技术分享