Javascript 当鼠标移动时，如何将html元素放置在鼠标位置而不延迟？

我目前正在开发一个基于web的绘图应用程序，它不使用画布。我之所以避免使用画布，是因为我将在放置html元素时向它们添加CSS关键帧。它还允许我跟踪每个单独的div，因为我可以给它们递增的id

我目前放置div的方式是使用Jquerys的.on（“mousemove”）。。。 我遇到的问题是，如果你移动鼠标太快，它会在直线上产生间隙

我的问题是，是否有一种方法可以在间隙之间形成一条线

我用一段代码制作了一个JSFIDLE

谢谢， 杰瑞德

var mousePosX, mousePosY, style, circle;

var windowHeight = $(window).height(), // Height of entire window
    windowWidth = $(window).width(); // Width of entire window

$(document).on("mousemove", function (event) {
    mousePosX = event.pageX; // px amount of mouse pos
    mousePosY = event.pageY; // px amount of mouse pos
    style = "top:" + (mousePosY - ($('#circle').height() / 2)) + "px; left: " + (mousePosX - ($('#circle').width() / 2)) + "px;";
    $("<div id='circle' style='" + style + "'></div>").appendTo('#drawpad');
});

var mousePosX，mousePosY，style，circle；
var windowHeight=$（window）.height（），//整个窗口的高度
windowWidth=$（window）.width（）；//整个窗口的宽度
$（文档）.on（“mousemove”，函数（事件）{
mousePosX=event.pageX；//px鼠标位置的数量
mousePosY=event.pageY；//px鼠标位置的数量
style=“top:”+（mousePosY-（$（'#圆'）.height（）/2））+“px；left:”+（mousePosX-（$（'#圆'）.width（）/2））+“px；”；
$（“”）。附加到（“#绘图板”）；
});

由于您知道每个鼠标事件，因此可以保存上一个事件的上下文并计算此事件与上一个事件之间的距离。由此，可以沿上一个位置和当前位置之间的直线添加任意数量的圆。你不需要更多的事件来生成一行。

“我可以给他们递增的ID”-那么你可能应该在你的演示中这样做；因为它们当前都具有相同的

id

。您无法加快mousemove事件的速度。不幸的是，它是由浏览器生成的-请检查此项。而且，就我个人而言，我在使用canvas时没有任何滞后