如何在 javascript 中重新创建 pmouseY 和 pmouseX（processing.JS 变量）

Question

如何创建 processing.JS javascript 库中的内置变量 pmouseY 和 pmouseX 变量。

pmouseX表示鼠标上一个x坐标 pmouseY表示鼠标上一个y坐标

而正常的mouseX/Y（对应于javascript事件。clientY/X变量）是鼠标的当前位置。这是我尝试做的一个 pastebin： http://pastebin.com/XSu3XHAJ 我刚刚尝试通过将鼠标的当前 X/Y 位置减少一个来制作 pmouseX/Y。这是 javascript 重建可汗学院 "project" 的尝试： https://www.khanacademy.org/computer-programming/pmousex-pmousey-processingjs/5082026180870144

剧透警告：它根本没有接近想要的结果。

Answer 1

在您的事件处理程序中，存储鼠标位置。这样，在下一帧，该变量就是上一帧的鼠标位置。

var pmX, pmY;

function createLines(event) {

    var mX = event.clientX;
    var mY = event.clientY;

    if (pmX && pmY) {
        board.beginPath();
        board.moveTo(pmX, pmY);
        board.lineTo(mX, mY);
        board.stroke();
    }

    pmX = mX;
    pmY = mY;

}

如何在 javascript 中重新创建 pmouseY 和 pmouseX（processing.JS 变量）

How to recreate pmouseY & pmouseX (processing.JS variables) in javascript

javascript

html5-canvas

mouseevent

processing.js