跳过div后面的绘图画布

Question

我在文档中有一个HTML5 canvas。在那个画布上可能有一些div，将画布隐藏在它们后面（但仍然可以看到画布的一部分）。

知道画布的位置如何检查哪些div实际覆盖了画布，以便我不再为了提高性能而在这些div后面画出来？

我如何实际绘制部分画布以节省一些处理能力？

Answer 1

确定是否存在重叠：

var divid = document.getElementById ("myDiv");
var canvasid = document.getElementById ("myCanvas");

var div = divid.getBoundingClientRect();
var canvas = canvasid.getBoundingClientRect();

var overlap = !(div.right < canvas.left || 
                div.left > canvas.right || 
                div.bottom < canvas.top || 
                div.top > canvas.bottom);

为了防止在分层div下面绘图，我会在画布上的绘图中使用那些左/右/上/下偏移。