Question

我使用html2canvas拍摄了一个＆＃39;截图＆＃39;我的窗口，然后我作为一个微弱的叠加附加到窗口，然后当你开始滚动时，这慢慢淡出。然后当您停止滚动时，会附加屏幕截图，并在滚动开始时再次淡出。这个想法是，如果你经常滚动和停止，你会建立一些微弱的层，每个层都会在自己的时间内消失。

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

或者我可以使用一个事件 - 开始滚动 - 一次性添加新屏幕截图和淡出前一个屏幕截图，但仍然无法弄清楚如何定位每个。

这是我的截图叠加代码：

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，但也许对于那些人来说这是一个简单的解决方法吗？

html2canvas - 追加画布然后删除前一个

0 个答案: