jquery - div の背後にあるキャンバスの描画をスキップする

Question

ドキュメントに HTML5canvasがあります。そのキャンバスの上にいくつか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の下に描画されないようにするために、キャンバス上の描画でこれらの左/右/上/下のオフセットを使用します。