Javascript Canvas два beginPath () lineTo () подключаются - PullRequest
Новая
       66

Javascript Canvas два beginPath () lineTo () подключаются

0 голосов
/ 04 ноября 2019

Я делаю игру (называемую Flow в android и магазине приложений), но у меня есть проблема в 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,a,b,canvas,usedColor)
      }
    })
}

function drawLine(map,a,b,canvas,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;
        }
    })
    })

}
...