这是一款HTML5 canvas橡皮擦擦拭效果。该效果通过canvas来制作遮罩层和擦拭用的橡皮擦，用户可以通过移动鼠标来移除遮罩层，效果非常炫酷。

因为发代码有时会排版混乱，所以先发图演示了。源码已经打包好了，想学习的朋友可以下载练习练习，你不一定会哦。小编每天都会分享web前端和一些小项目，还有php方面的知识，第一时间会在我的微信朋友圈发布，源码下载加imoee88。首先把代码撸起来！首先把代码撸起来！首先把代码撸起来！重要的事说三遍。借用某位大V的话说，“编程是门手艺活”。什么意思？得练。

使用方法

HTML结构：

该HTML5 canvas橡皮擦擦拭效果由两个<canvas>元素组成。

<canvas id="canvas-overlay"></canvas>

<canvas id="canvas-lines"></canvas>

CSS样式

为该HTML5 canvas橡皮擦擦拭效果添加下面的CSS样式。

body {

min-height: 100vh;

background-image: url(../img/1.jpg);

background-size: cover;

overflow: hidden;

}

#canvas-overlay {

position: relative;

z-index: 98;

opacity: 0.85;

}

#canvas-lines {

position: absolute;

top: 0;

left: 0;

z-index: 99;

opacity: 0.05;

}

JavaScript

然后通过js代码创建可交互的橡皮擦效果，js代码在今日头条排版实在头疼就不写了，看源码最好，结构比较清晰。