Question

    if(spacepress==false){ //before space bar is pressed (space bar = allows fox movement)
        function init(){ //INITIALIZATION
        c.addEventListener('mousedown', mouseDown, false);
        c.addEventListener('mouseup', mouseUp, false);
        c.addEventListener('mousemove', mouseMove, false);
        }

        function mouseDown(event) { //MOUSE DOWN
            drag = true;
            draw(getMousePos.x, getMousePos.y, false);
        }

        function mouseUp(){ //MOUSE UP
            drag = false;
        }

        function getMousePos() { //get MOUSE x,y POSITION
            rect = c.getBoundingClientRect();
            return {
              x: event.clientX - rect.left,
              y: event.clientY - rect.top
            };
        }

        function mouseMove(){ //MOUSE MOVE
            if(drag){
                draw(getMousePos.x, getMousePos.y, true);
                console.log(getMousePos.x); //SHOWS UNDEFINED, think this is the issue
            }
        }

        function draw(x,y,drag){ //DRAWING
            if (drag){
                ctx.beginPath();
                ctx.strokeStyle = "#537c38";
                ctx.lineWidth = 20;
                ctx.lineJoin = "round";
                ctx.moveTo(lastX, lastY);
                ctx.lineTo(x, y);
                ctx.closePath();
                ctx.stroke();
            }
            lastX = x;
            lastY = y;
        }
    init();
    }

当谈到javascript时我很新，所以这可能是一个非常新手的错误，这是一个简单的绘图应用程序，我想在我的一个游戏中插入，我必须为学校项目做但我有我不知道如何解决的问题，如果你有任何解决方案请尽可能以noob友好的方式解释它们，因为我可能不会理解这个问题的任何先进的解决方案。我几乎是积极的问题是在getMousePos（）函数（可能有多个问题，不确定）

Answer 1

首先，＆＃34;事件＆＃34; getMousePos中的变量是未定义的，因为getMousePos不会＆＃34;参见＆＃34;它。你必须给＆＃34;事件＆＃34;作为getMousePos的参数。这是一个如何传递＆＃34;事件＆＃34;并在你的功能中使用它：

function mouseDown(event) { //MOUSE DOWN
  drag = true;
  var coords = getMousePos(event);
  draw(coords.x, coords.y, false);
}

function getMousePos(event) { //get MOUSE x,y POSITION
  rect = c.getBoundingClientRect();
  return {
    x: event.clientX - rect.left,
    y: event.clientY - rect.top
  };
}

在您因鼠标事件而调用函数后需要计算鼠标位置的其他情况下，您必须执行相同的操作。

简单的javascript绘图应用程序（带鼠标）问题（未定义鼠标位置的问题）

1 个答案: