多个画布作为图层

Question

我在html页面中将多个画布用作html5中的图层-画布元素-多层，但是遇到了一些问题。 如果我画它们

<canvas id="overlay"></canvas>
<canvas id="widget"></canvas>

我看到了所有图纸，没有问题，但是如果交换它们

<canvas id="widget"></canvas>
<canvas id="overlay"></canvas>

然后，我只看到“小部件”画布。 目前，绘图代码非常简单。

// overlay 
ctx.clearRect(0, 0, overlay.width, overlay.height);
ctx.beginPath();
ctx.moveTo(0, 25);
ctx.lineTo(0, 200);
ctx.stroke();

// widget
ctx.clearRect(0, 0, widget.width, widget.height);

有没有人遇到这个问题？ 难道我做错了什么？

Answer 1

我刚刚发现了。 问题出在另一段代码中。 我仅在'mousemove'事件上在叠加层上绘图，但我在监听小部件mousemove事件

// WRONG: widget.addEventListener('mousemove', drawOverlay);
overlay.addEventListener('mousemove', drawOverlay);

因此，当小部件位于背面时，不会调度鼠标移动事件。