Javascript[CANVAS]”；降低帧速率？“；

你好吗？我正在努力解决代码中的一个小问题。我被要求用javascript创建一个画图程序，我几乎做到了，但我正在为它的画图速度而挣扎。我让它画画，这样它就可以在客户端x和y位置的每个鼠标拖动事件上绘制一些东西

看看示例绘画的形状是如何定义的，你可以看到每一个，这是我在画布上绘制后的程序

这是我的，画得太快了

---

可以节省每次绘制的时间，并且无论何时可能再次绘制，都可以检查自上次绘制以来是否经过了足够的时间

以下是一个例子：

const ctx=document.getElementById（'canvas'）.getContext（'2d'）；
const speedInput=document.getElementById（'draw-speed'）；
让buffer=+speedInput.value；
让我来画画；
ctx.canvas.onmousemove=（{x，y}）=>{
const now=Date.now（）；
如果（！lastPaint | |（现在-lastPaint）>缓冲区）{
lastPaint=现在；
ctx.fillRect（x，y，10，10）；
}
};
speedInput.onchange=（{target}）=>{
缓冲区=+目标值；
};
画布{
边框：1px纯黑；
}
标签{
显示：块；
}

牵引速度
0
50
100
150
您可以节省每次绘制的时间，无论何时您可能再次绘制，请检查自上次绘制以来是否经过了足够的时间

以下是一个例子：


const ctx=document.getElementById（'canvas'）.getContext（'2d'）；
const speedInput=document.getElementById（'draw-speed'）；
让buffer=+speedInput.value；
让我来画画；
ctx.canvas.onmousemove=（{x，y}）=>{
const now=Date.now（）；
如果（！lastPaint | |（现在-lastPaint）>缓冲区）{
lastPaint=现在；
ctx.fillRect（x，y，10，10）；
}
};
speedInput.onchange=（{target}）=>{
缓冲区=+目标值；
};
画布{
边框：1px纯黑；
}
标签{
显示：块；
}

牵引速度
0
50
100
150
嘿，我能得到进一步的帮助吗？我的电子邮件是akradhak@ucsc.edu@如果我的帖子回答了你的问题，请接受。如果您需要帮助使其在您的用例中工作，请使用注释要求澄清。如果你有一个无关的或后续的问题，请创建一个新的帖子。嘿，我能得到一些进一步的帮助吗？我的电子邮件是akradhak@ucsc.edu@如果我的帖子回答了你的问题，请接受。如果您需要帮助使其在您的用例中工作，请使用注释要求澄清。如果你有一个不相关的或后续的问题，请创建一个新的帖子。
if(dragging && type.options[type.selectedIndex].value == "squares") {
            ctx.lineTo(e.clientX, e.clientY);
            ctx.lineWidth = 5;        
            ctx.beginPath();
            ctx.rect(e.clientX, e.clientY, 40, 40);    
            ctx.fill();
            ctx.fillStyle = "yellow";
            ctx.beginPath();
            ctx.moveTo(e.clientX, e.clientY);
}