如何在画布中修复这个"鼠标悬停"功能

Question

我用32x32瓷砖做了一个Canvas.我想要抚摸鼠标所在的瓷砖,这就是我所做的(感谢一些教程和调整)

首先,我创建cPush和cUndo.当我绘制一些东西时,会调用cPush来记忆它.对于cUndo,您稍后会看到.我也调用我的ctx var,然后调用canvas var.

var canvas = document.getElementById('canvas');
var cPushArray = new Array();
var cStep = -1;
var ctx = canvas.getContext('2d');

function cPush() {
    cStep++;
    if (cStep < cPushArray.length) { cPushArray.length = cStep; }
    cPushArray.push(document.getElementById('canvas').toDataURL());
}
function cUndo() {
    if (cStep > 0) {
        cStep--;
        var canvasPic = new Image();
        canvasPic.src = cPushArray[cStep];
        canvasPic.onload = function () { ctx.drawImage(canvasPic, 0, 0); }
    }
}

我会跳过一些部分,因为它们不是必需的.在这里,我正在调用onmousemove函数:

     canvas.onmousemove = function(e) {

    let rects = [], i = 0, r;
    let jk = 0;
    for(var nb = 0, l = map.terrain.length ; nb < l ; nb++) {
         var ligne = map.terrain[nb];
         var y2 = nb * 32;
         for(var j = 0, k = ligne.length ; j < k ; j++, jk++) {
             rects[jk] = {lignej: ligne[j], x: j * 32, y: y2, w: 32, h: 32};
         }
    }

第一部分用于获取地图的每个图块并将其存储到rects [x]这对我以后会有用,因为我需要特定的图块.

现在,我调用一个函数:

     map.test = function(linewidth) {
         this.tileset.dessinerTile(r.lignej, context, r.x, r.y);
         ctx.lineWidth = linewidth;
         ctx.strokeRect(r.x, r.y, 32, 32);
     }

这是为了重新绘制我正在打理的Tile.(r.= rects var,稍后你会看到)

剩下的就是:

         var rect = this.getBoundingClientRect(),
             x = e.clientX - rect.left,
             y = e.clientY - rect.top;

     while (r = rects[i++]) {
             ctx.beginPath();
             ctx.rect(r.x, r.y, 32, 32);

             if (ctx.isPointInPath(x, y) == true) {
                 cPush();
                 map.test(2);
             } else {
                 cUndo();
             }
     }
};

使用var Rect来检查鼠标的位置.

现在,有一段时间了.对于每个图块,我们将检查isPointinPath是否为真.(x和y是鼠标的位置).

所以,如果这是真的,函数map.test将绘制具有2 lineWidth笔划的tile,如上所述.

如果没有,它将撤消最后一个笔划.

我想在这里做什么:

如果鼠标位于图块上,则会对图块进行描边.如果鼠标移动,则撤消最后一个笔划并抚摸新笔划.

它能做什么 :

如果鼠标位于图块上,则在执行笔划撤消之前会对图块进行描边,因为它会检查其他图形.因此,在移动鼠标之前,笔划仅持续0.5秒而不是永久性.我认为问题是我正在使用"onmousemove"功能？我是否需要更改为"onmousehover"或类似的东西？我很失落......

谢谢您的帮助 !

记录问题(对不起,低FPS是gif)

http://recordit.co/GokcSAoMv6