Question

我在canvas元素上运行了一个背景动画，它填充了整个页面。

有没有办法确定某个特定的HTML是否覆盖了画布的一部分？这将允许我的动画根据画布的特定部分被（部分不透明的）HTML元素覆盖的事实来改变它的颜色。

Answer 1

你有很多方法可以做到这一点......你应该为我们发布一些代码来检查你的真实需求。但请看一下这个解决方案：

function isInOut(element){
    var canvas = element.closest('[data-canvas]');
    var canvasTop = canvas.offset().top;
    var canvasBottom = canvasTop + canvas.outerHeight();
    var canvasLeft = canvas.offset().left;
    var canvasRight = canvasLeft + canvas.outerWidth();

    var elementTop = element.offset().top;
    var elementBottom = elementTop + element.outerHeight();
    var elementLeft = element.offset().left;
    var elementRight = elementLeft + element.outerWidth();

    if(elementTop < canvasTop || elementBottom > canvasBottom || elementLeft < canvasLeft || elementRight > canvasRight){
        element.css('background','black').text('out');
    } else {
        element.removeAttr('style').text('in');
    }
}

演示：

http://jsfiddle.net/3nfkF/

确定HTML元素是否覆盖画布的一部分

1 个答案: