Question

我在html页面中使用多个画布作为html5 - canvas element - Multiple layers中的图层，但我遇到了一些问题。如果我画它们

<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

我刚刚发现了它。问题出在另一段代码中。我只在“鼠标移动”上绘制了叠加层。事件，但我正在侦听widget mousemove事件

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

所以当小部件在后面时，不会调度鼠标移动事件。

多个画布作为图层

1 个答案: