将两个 Canvas 层叠在一起 + 点击事件答案

【问题标题】：Layering two Canvas' on top of each other + click event将两个 Canvas 层叠在一起 + 点击事件
【发布时间】：2015-10-06 06:41:45
【问题描述】：

我想将两个 Canvas 元素叠加在一起。它们用于游戏，其中下部 Canvas 将显示一个六角网格，而上部 Canvas 用于显示问题/命令（基本上是箭头或十六进制突出显示 - 我不想重绘一个巨大的六角网格无数次）由玩家给出.

画布按 zIndex 1/2 分层。

但是，问题是：显示在顶部 Canvas 上的订单应该是响应底部 Canvas 的“click”和“mousemove”事件而绘制的。

显然，通过在“hexgrid”画布之上分层“orders”画布，“hexgrid”画布将不再触发任何鼠标移动和单击事件，因为它不再接收事件。

有没有办法“转发”，即将事件从一个元素传播到另一个元素，或者解决我的问题的另一种聪明方法是什么？

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

您可能需要在画布的根元素上监听事件吗？之后你会从他们俩那里收集数据并进行处理吗？

<div onclick="...">
     <canvas>
     <canvas>
</div>

有过这种情况的经验，画布占据了根的所有空间，并且 div 内的坐标与画布相同。

【讨论】：

【解决方案2】：

我会将事件传播到下一个画布，如果画布重叠，坐标将相同。可以为覆盖画布内定义的对象创建触发器。

var Game = {canvas1: undefined, canvas2: undefined};

Game.canvas1 = document.getElementById('canvas1');
Game.canvas1.addEventListener('click', on_canvas_click1, false);

Game.canvas2 = document.getElementById('canvas2');
Game.canvas2.addEventListener('click', on_canvas_click2, false);

function on_canvas_click1(ev) {
    //do your stuff
    on_canvas_click2(ev);
}

function on_canvas_click2(ev) {
   
	 var mousePos = getMousePos(Game.canvas2, ev);
    
        var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y + "  target: " + mousePos.target + " Id: " +  mousePos.target.getAttribute("id");;
        writeMessage(Game.canvas2, message);   
}


function writeMessage(canvas, message) {
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.font = '8pt Calibri';
        context.fillStyle = 'black';
        context.fillText(message, 10, 25);
      }
function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top,
          target: evt.target 
        };
      }

<canvas id="canvas1" width="400" height="400" style="border: 1px solid black"></canvas>

<canvas id="canvas2" width="400" height="400" style="border: 1px solid black"></canvas>

【讨论】：

【解决方案3】：

也许您可以使用例如 document.getElementById('otherCanvas').click() 来触发其他画布的事件？

【讨论】：