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

使用方法

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代码创建可交互的橡皮擦效果。

var canvas = document.querySelector('#canvas-overlay');
var canvasContext = canvas.getContext('2d');
var lineCanvas = document.querySelector('#canvas-lines');
var lineCanvasContext = lineCanvas.getContext('2d');
var pointLifetime = 500;
var points = [];

//FILL CANVAS
canvasContext.fillStyle="rgba(0, 0, 0, 0.5)";
canvasContext.fillRect(0, 0, canvas.width, canvas.height);

//INIT
function init() {
  document.addEventListener('mousemove', onMouseMove);
  window.addEventListener('resize', resizeCanvases);
  resizeCanvases();
  tick();
}

init();

//RESIZE CANVAS
function resizeCanvases() {
  canvas.width = lineCanvas.width = window.innerWidth;
  canvas.height = lineCanvas.height = window.innerHeight;
}

function onMouseMove(event) {
  points.push({
    time: Date.now(),
    x: event.clientX,
    y: event.clientY
  });
}

function tick() {
  // Remove old points
  points = points.filter(function(point) {
    var age = Date.now() - point.time;
    return age < pointlifetime;="" });="" drawlinecanvas();="" drawimagecanvas();="" requestanimationframe(tick);="" settimeout(()=""> {
    //tick();
  //}, 1000 / 60);
}

function drawLineCanvas() {
  var minimumLineWidth = 70;
  var maximumLineWidth = 140;
  var lineWidthRange = maximumLineWidth - minimumLineWidth;
  var maximumSpeed = 70;

  lineCanvasContext.clearRect(0, 0, lineCanvas.width, lineCanvas.height);
  lineCanvasContext.lineCap = 'round';
  lineCanvasContext.shadowBlur = 70;
  lineCanvasContext.shadowColor = '#000';
  
  for (var i = 1; i < points.length;="" i++)="" {="" var="" point="points[i];" var="" previouspoint="points[i" -="" 1];="" change="" line="" width="" based="" on="" speed="" var="" distance="getDistanceBetween(point," previouspoint);="" var="" speed="Math.max(0," math.min(maximumspeed,="" distance));="" var="" percentagelinewidth="(maximumSpeed" -="" speed)="" maximumspeed;="" linecanvascontext.linewidth="minimumLineWidth" +="" percentagelinewidth="" *="" linewidthrange;="" fade="" points="" as="" they="" age="" var="" age="Date.now()" -="" point.time;="" var="" opacity="(pointLifetime" -="" age)="" pointlifetime;="" linecanvascontext.strokestyle='rgba(0, 0, 0, ' +="" opacity="" +="" ')';="" linecanvascontext.beginpath();="" linecanvascontext.moveto(previouspoint.x,="" previouspoint.y);="" linecanvascontext.lineto(point.x,="" point.y);="" linecanvascontext.stroke();="" }="" }="" function="" getdistancebetween(a,="" b)="" {="" return="" math.sqrt(math.pow(a.x="" -="" b.x,="" 2)="" +="" math.pow(a.y="" -="" b.y,="" 2));="" }="" function="" drawimagecanvas()="" {="" canvascontext.globalcompositeoperation='source-over' ;="" canvascontext.save();="" canvascontext.fillstyle="rgb(0, 0, 0)" ;="" canvascontext.globalalpha="0.009;" canvascontext.fillrect(0,="" 0,="" canvas.width,="" canvas.height);="" canvascontext.restore();="" canvascontext.globalcompositeoperation='destination-out' ;="" canvascontext.drawimage(linecanvas,="" 0,="" 0);="" }="">

在线预览    源码下载