HTML5 Canvas图片涂层擦除效果

HTML5 Canvas overlay erase effect，可用来模拟灰尘擦除的交互特效。

h5, erase

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4803
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

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);

}

编译

CSS

HTML

HTML5 Canvas overlay erase effect，可用来模拟灰尘擦除的交互特效。

h5, erase

编辑器支持Emmet

快捷键

HTML5 Canvas overlay erase effect，可用来模拟灰尘擦除的交互特效。

h5, erase

HTML5 Canvas图片波浪粒子化动画特效

HTML5 Canvas把图片转换成ASCII字符拼图

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：