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