Question

我正在创建一个小游戏，用户用鼠标在画布上绘制直线（使用onmousedown和onmouseup作为开始和结束事件）。我想要做的是使用onmousedown和onmousemove创建该行的预览以指导用户。问题是，在用户释放鼠标按钮之后，“ onmousemove”仍会从用户释放鼠标的位置开始创建预览。

我尝试使用return 0或while（ok）（我是JavaScript新手），但是没有一个起作用。是否有可能完全放弃onmousemove并使用某种计时器（例如在C＃中）？

HTML

$(document.getElementById("myCanvas")).on("mousedown",function()
{
    startline();
});         

$(document.getElementById("myCanvas")).on("mouseup",function()
{
    endline();
});

脚本

function startline ()
{
    oldx = event.pageX; // globally declared
    oldy = event.pageY;
    $(document.getElementById("myCanvas")).on("mousemove",function()
    {
        var ctx = document.getElementById("myCanvas").getContext("2d");
        livex = event.pageX;
        livey = event.pageY;
        ctx.beginPath();
        ctx.lineWidth = 5;
        ctx.strokeStyle = "#808080";
        ctx.moveTo(vechix, vechiy);
        ctx.lineTo(livex, livey);
        ctx.stroke();
    }); 
}
function endline ()
{
    var x = event.pageX;
    var y = event.pageY;
    var ctx = document.getElementById("myCanvas").getContext("2d");
    ctx.lineWidth = 5;
    ctx.beginPath();
    ctx.strokeStyle = "#000000";
    ctx.moveTo(oldx, oldy);
    ctx.lineTo(x, y);
    ctx.stroke();
}

我希望释放鼠标时onmousemove函数能够停止运行。另外，输出会创建一千行并将其全部显示，但我设法解决了这一问题。

无论如何，要在鼠标仍位于移动区域时停止“ onmousemove”功能？

0 个答案: