我正在制作一个游戏（在android和app store中称为Flow），但是在Js中存在一个问题，如果我通过单元格绘制一条线，那么我将结束该函数并再次调用“ mousedown”，这些线将连接起来。 我觉得很傻。您能帮我为什么他们即使我使用context.beginPath（）也能连接。这里也是jsfiddle。 https://jsfiddle.net/vj7f3qb0/

function inGame(map,usedColor) {
    let x = 0;
        y = 0;
        canvas = document.querySelector('canvas')


    const position = canvas.getBoundingClientRect();

    canvas.addEventListener('mousedown',e => {
      x = e.clientX - position.left;
      y = e.clientY - position.top; 
      let b = parseInt(Math.round(x) / 50)
      let a = parseInt(Math.round(y) / 50)
      if(map[a][b] != 0) {
          isValidClick = true
          isDrawing = true
        //   drawLine(map,b,a,c,usedColor)
        drawLine(map,canvas,usedColor)
      }
    })
}

function drawLine(map,usedColor) {
    let savedMap = map;
    let c = canvas.getcontext('2d');
    // console.log(c)
    const position = canvas.getBoundingClientRect();
    canvas.addEventListener("mousemove",e => {
        let y = parseInt(Math.round(e.clientX - position.left) / 50)
        let x = parseInt(Math.round(e.clientY - position.top) / 50)
        if(x != a || y != b){
            if(isDrawing) {
            c.beginPath()
            c.moveTo((b*50)+25,(a*50)+25);
            c.lineTo((y*50)+25,(x*50)+25);
            c.lineWidth = 5;
            c.strokeStyle = "black"
            c.stroke()
            console.log("x,y")
            console.log(x,y)
            a = x
            b = y
        }}
        // console.log(x,y)
        // console.log(a,b)
    canvas.addEventListener("mouseup",e => {
        if(isDrawing) {
            isDrawing = false;
        }
    })
    })

}