有没有办法增加JavaScript'；s onmousemove事件'；更新速度如何？

我正在尝试用HTML和JavaScript制作一个简单的绘图脚本。我这样做是通过在整个窗口上创建一个div，然后通过让该div的onmousemove事件调用updateFunc（）来跟踪鼠标位置，这样当您按住鼠标左键单击时，就会创建一个红色的圆形div元素，并在每次更新时添加该元素，使其类似于画笔

问题是onmousemove事件的更新非常缓慢，如果您移动光标太突然，则每个创建的div元素之间都会有很大的间隙。理想情况下，无论移动光标的速度如何，创建直线都应尽可能平滑。有没有办法用这个方法来做这件事，或者我应该试试别的方法

<div onmousemove="updateFunc();" id="background" style="position:fixed;width:100%;height:100%;z-index:100%;" onmousedown="isDown = true;" onmouseup="isDown = false;"></div>
<div id="test1" style="width:10px;height:10px;background-color:red;"></div>
<script>
var test1 = document.getElementById("test1");
var isDown = false;
function updateFunc() {
    x = event.clientX;
    y = event.clientY;
    document.getElementById("test1").style.left = (x - (Number(test1.style.width.slice(0,-2)) / 2)) + "px";
    document.getElementById("test1").style.top = (y - (Number(test1.style.height.slice(0,-2)) / 2)) + "px";
    if (isDown) {
        var div = document.createElement("div");
        div.style.position = "absolute";
        div.style.top = (y - (Number(test1.style.height.slice(0,-2)) / 2)) + "px";
        div.style.left = (x - (Number(test1.style.width.slice(0,-2)) / 2)) + "px";
        div.style.backgroundColor = "red";
        div.style.width = "10px";
        div.style.height = "10px";
        div.style.borderRadius = "200px 200px 200px 200px";
        var body = document.querySelector("body");
        body.appendChild(div);
    }
}
</script>

var test1=document.getElementById（“test1”）；
var isDown=假；
函数updateFunc（）{
x=event.clientX；
y=event.clientY；
document.getElementById（“test1”）.style.left=（x-（Number（test1.style.width.slice（0，-2））/2））+“px”；
document.getElementById（“test1”）.style.top=（y-（Number（test1.style.height.slice（0，-2））/2））+“px”；
如果（isDown）{
var div=document.createElement（“div”）；
div.style.position=“绝对”；
div.style.top=（y-（数字（test1.style.height.slice（0，-2））/2））+“px”；
div.style.left=（x-（Number（test1.style.width.slice（0，-2））/2））+“px”；
div.style.backgroundColor=“红色”；
div.style.width=“10px”；
div.style.height=“10px”；
div.style.borderRadius=“200px 200px 200px 200px”；
var body=document.querySelector（“body”）；
附体儿童（div）；
}
}

无法加速浏览器触发

鼠标移动事件。

你可以使用一些基本的三角学，在创建两个点后，简单地用缺少的DIV连接这两个点。。。等等，我刚才说的是DIVs吗？

DOM不应用于绘制应用程序（除非您正在创建一个32x32 favicon生成器，但甚至比…）使用
canvas
。很容易就可以开始了

画布也会有同样的“问题”。它会用一条线连接你的鼠标移动点，但是如果你用鼠标移动的很快，这条线看起来就像一个多边形的边。在这种情况下，一些贝塞尔曲线或二次曲线可能会有所帮助。最终的结果将是一个更快、更多的UX Pleasant应用程序。用户还可以下载自己的图形（另存为图像），一旦创意耗尽

下面是一个使用
画布
和
正交曲线
的演示：


var-pen={
颜色：“rgba（255,0,0,1.0）”，//设置所需颜色
大小：3//设置所需的大小
};
var-pts=[]；
var isDown=假；
var isTouch=假；
var cvs=document.getElementById（'canvas'）；
var cvs2=document.createElement（'canvas'）；
var ctx=cvs.getContext（'2d'）；
var ctx2=cvs2.getContext（'2d'）；
函数setCvsSize（）{
cvs.width=cvs2.width=document.documentElement.clientWidth；
cvs.height=cvs2.height=document.documentElement.clientHeight；
}
功能暂停（ev）{
ev.preventDefault（）；
isTouch=ev.type==“touchstart”；
ev=isTouch？ev.触碰[0]：ev；
isDown=真；
推({
x:ev.clientX，
y:ev.clientY
});
支点（）；
}
移动功能（ev）{
ev.preventDefault（）；
ev=isTouch？ev.触碰[0]：ev；
如果（isDown）{
ctx.clearRect（0，0，cvs.width，cvs.height）；
drawImage（cvs2，0，0）；//绘制到内存cvs2
推({
x:ev.clientX，
y:ev.clientY
});
支点（）；
}
}
功能补偿（ev）{
ev.preventDefault（）；
isDown=isTouch=false；
临时秘书处=[]；
//将状态保存到内存cvs2中
ctx2.clearRect（0，0，cvs.width，cvs.height）；
ctx2.drawImage（cvs，0,0）；
}
函数clear（）{
ctx.clearRect（0，0，cvs.width，cvs.height）；
ctx2.clearRect（0，0，cvs.width，cvs.height）；
}
函数drawPoints（）{
var i=0；
var i2=pts.length>1？1:0；
ctx.beginPath（）；
ctx.lineWidth=pen.size；
ctx.lineJoin='round'；
ctx.lineCap='圆形'；
移动到（pts[0].x，pts[0].y）；
对于（；i
*{margin:0；}
#帆布{
显示：块；
}
查看一下而不是使用
建议：不要在更新函数中扫描DOM<代码>文档。获取*
速度较慢。在鼠标移动功能之外进行操作。它不是JavaScript，而是web浏览器。“mousemove”事件被频繁触发，但您正在创建一个元素并在每个事件上更新DOM。这会导致整个页面被重新呈现。是的，如果OP确实使用线条来连接每个点，那么他们可以使用
ctx.lineCap='round'以“平滑”曲面上的边line@Nick如果所需笔形为圆形，则绝对可以：）