HTML5 canvas橡皮擦擦拭效果

这是一款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);

}