Javascript html2canvas-附加画布，然后删除以前的

我正在使用html2canvas对我的窗口进行“截图”，然后将截图作为一个模糊的覆盖添加到窗口中，当你开始滚动时，截图会慢慢消失。然后，当你们停止滚动时，屏幕截图被追加，并在滚动开始时再次淡出。这个想法是，如果你经常滚动和停止，你会建立一个模糊的层，每个层都会在自己的时间淡出

到目前为止一切进展顺利。我已经设法在停止滚动时多次触发图像捕获事件，但无法仅针对一个画布（最近的一个）在开始滚动时淡出。我的代码一起淡出所有画布，然后完全删除画布，这样我就不能再次触发停止滚动图像捕获事件

或者，我可以使用一个事件-开始滚动-一次添加新的屏幕截图和淡出以前的屏幕截图，但仍然无法确定如何针对每一个

这是我的屏幕截图覆盖代码：

var canvas = document.querySelector("canvas");

$.fn.scrollEnd = function(callback, timeout) {          
    $(this).scroll(function(){
        var $this = $(this);
        if ($this.data('scrollTimeout')) {
          clearTimeout($this.data('scrollTimeout'));
        }
        $this.data('scrollTimeout', setTimeout(callback,timeout));
    });
};


$(window).scrollEnd(function(){
alert('stopped scrolling');

    html2canvas(document.body, {canvas: canvas, allowTaint:true,})
    .then(function(canvas) {
        console.log('Drew on the existing canvas');
    });

}, 1000);

这是我淡出屏幕截图的代码：

function debounce(func, wait, immediate) {
var timeout;
return function() {
    var context = this, args = arguments;
    var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};


var scrollingFn = debounce(function() {
$('body').find('canvas').last().delay('4000').fadeOut(10000);
console.log('working');
}, 250, true);

window.addEventListener('mousewheel', scrollingFn);
window.addEventListener('scroll', scrollingFn);

我不是jquery最流利的人，但这对那些精通jquery的人来说也许是一个简单的解决办法