Question

我想将两个Canvas'元素叠加在一起。它们用于游戏，其中下部Canvas将显示hexgrid，而上部Canvas旨在显示问题/命令（基本上是箭头或十六进制突出显示 - 我不想重绘大量的六角形数十亿次）

画布由zIndex 1/2分层。

然而，问题是：顶部画布上显示的订单应该是为了响应“click”和“mousemove”事件而绘制到底部画布。

显然，通过在“hexgrid”画布上层叠“命令”Canvas，任何鼠标移动和点击事件都不会被“hexgrid”画布触发，因为它不再接收事件。

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

Answer 1

你可能需要在画布的根元素上听事件吗？在事件发生之后，您将从这两个数据中收集数据并进行处理？

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

有这种情况的经验，画布占据了根的所有空间，div内部的坐标对于画布是相同的。

Answer 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>

Answer 3

也许你可以触发其他画布＆＃39;例如document.getElementById（＆＃39; otherCanvas＆＃39;）。click（）？

将两个Canvas'叠加在彼此之上+单击事件

3 个答案: