Question

我需要对图像进行过滤，然后使用鼠标移动擦除过滤器并将图像保留为原始格式。为此，我正在考虑将两个画布彼此相连顶部有一个相对透明的过滤器。

 <div style="position: relative;">
<canvas id="picture-layer" width="100" height="100" 
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas
<canvas id="filter-layer" width="100" height="100" 
style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

那么如何在鼠标移动时擦除滤镜层滤镜并从下方显示图像？

Answer 1

当页面加载时，您可以调用一个用半透明颜色填充过滤器画布的函数。例如......

function fillFilterCanvas() {
    var canvas = document.getElementById("filterCanvas");
    var context = canvas.getContext("2d");
    context.rect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "rgba(0,0,0,0.75)";
    context.fill();    
}

当鼠标移过滤镜画布时，您可以调用一个清除鼠标位置附近滤镜画布部分的功能。例如......

function clearFilterCanvas(x, y) {
    var canvas = document.getElementById("filterCanvas");
    var context = canvas.getContext("2d");
    var width = 20;
    var height = 20;
    context.clearRect(x - width / 2, y - height / 2, width, height);
}

从鼠标移动事件处理程序中，您可以使用鼠标在过滤器画布中的位置调用clearFilterCanvas（）函数。例如......

function filterCanvas_mousemove(e) {
    clearFilterCanvas(e.offsetX, e.offsetY);
}

在html5画布中平滑过滤图像。

1 个答案: