如何将鼠标坐标绘制为正弦波？

Question

我需要像地震仪一样绘制鼠标的x和y坐标，但是我不知道该怎么做，我将欣赏一些示例。我使用以下两个代码之一：

var initialTime = new Date().getTime();
document.addEventListener("mousemove", function(e) {
    var x = new Date().getTime() - initialTime;
    var y1 = e.x;
    var y2 = e.y;
    console.log(x, y1, y2);
}, true);

或这个

function showCoords(event) {
  var x = event.clientX;
  var y = event.clientY;
  var coor = "X coords: " + x + ", Y coords: " + y;
  document.getElementById("demo").innerHTML = coor;
}

function clearCoor() {
  document.getElementById("demo").innerHTML = "";
}

div {
  width: 200px;
  height: 100px;
  border: 1px solid black;
}

<div onmousemove="showCoords(event)" onmouseout="clearCoor()"></div>

<p id="demo"></p>