Question

我试图使用javascript创建一个基本的绘画应用程序。当且仅当鼠标按下时，鼠标才会画到画布上。我的问题似乎是变量lastX和lastY。这些变量应该是鼠标指针的当前坐标，但它们在单击鼠标时而不是在鼠标移动时拾取坐标。当鼠标移动并因此绘制时，这些变量应该是动态的。

我知道如果我将lastX和lastY设置为整数，那么当我点击画布时，它会绘制一条直线到那些坐标。我必须遗漏一些东西，因为我在测试时没有收到任何代码错误，只是没有工作！

有人可以帮我解释一下我哪里出错了吗？

var mycanvas= document.getElementById("canvas");
var Line = mycanvas.getContext("2d");

// Mouse Coordinates 
var x;
var y;

// Mousedown - Drawing
mycanvas.addEventListener("mousedown",function(e){console.log("Draw");  

    x = e.pageX - this.offsetLeft;
    y = e.pageY - this.offsetTop;

    mousePressed = true;

    Draw(x, y, true)


            return false;                               
    });

// draw function    

function Draw()
{  

 Line.beginPath();
 Line.strokeStyle = "#000000";
 Line.lineWidth =10;
 Line.lineJoin = "round";
 Line.moveTo(lastX, lastY);
 Line.lineTo(x, y);
 Line.closePath();
 Line.stroke();

var lastY = y;
var lastX = x;

};

Answer 1

您需要使用 mousemove 事件而不是mousedown。

但您的代码还有其他几个问题。你正在调用Draw（x，y，true），但你定义了没有任何参数的Draw。此外，您将lastX和lastY声明为Draw底部的局部变量，但在上面使用它们在Line.moveTo（lastX，lastY）中声明它们。在调用Draw（x，y，true）之后，你也错过了一个分号。

画布绘画应用程序没有绘图（Javascript）

1 个答案: