多个画布作为图层

时间:2015-05-18 12:19:56

标签: javascript html5 canvas

我在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);

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

1 个答案:

答案 0 :(得分:0)

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

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

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