我在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);
有没有人遇到过这个问题?难道我做错了什么?
答案 0 :(得分:0)
我刚刚发现了它。问题出在另一段代码中。我只在“鼠标移动”上绘制了叠加层。事件,但我正在侦听widget mousemove事件
// WRONG: widget.addEventListener('mousemove', drawOverlay);
overlay.addEventListener('mousemove', drawOverlay);
所以当小部件在后面时,不会调度鼠标移动事件。