我的 canvas 输入偏离 htmk 标题

Question

我正在制作路径查找器 html。

我正试图在我的 canvas 上方做一个标题。 但是，如果我这样做，canvas 就会滑入标题并且输入错误。

我试图将它们放在 2 个单独的 div 中，但它不起作用。 我该如何解决这个问题？

<div>
    <h1 style="color: white; background-color:purple;font-family: Comic Sans MS;">
        Welocome
    </h1>
</div>
<div><canvas id="gc"></canvas></div>

     document.addEventListener("click", onClick);
    function click(squares){
    clicX = e.pageX;
    clicY = e.pageY;
    isChanged = false;
    squars.forEach(colum => {
        colum.forEach(squar => {
            x = squar[0];
            y = squar[1];
    if (clicX >= x+seperate && clicX <= x+seperate+width 
                && clicY >= y+seperate && clicY <= y+seperate+height) {
                    if (e.button == 2) {
                        squar[2] = isStart? "red":"blue"; //if there is start so it gone to red for end
                        isChanged = true;
                    }
                    else if (squar[2] != "grey") {
                        squar[2] = "grey";
                    }
                    else{
                        squar[2] = "black";
                    }
                    printSquares();
            }
        });
    });
    isChanged ? isStart = !isStart : false;
    isChanged = false;
    return false;
}

Answer 1

最后我的解决方案是，我需要对我放入 html 文档的每个项目进行调整。 代码中的调整在 clickY 中。 我计算 div 所做的移位并减去 var 的移位。 前任：

pageShift = 65;
clicX = e.pageX;
clicY = e.pageY-pageShift;