JavaScript [ Canvas ] "Slow down framerate?"

Question

你好吗？我正在努力解决我的代码中的一个小问题。我被要求用 javascript 创建一个绘画程序，我已经快完成了，但我正在努力解决它的绘画速度。我让它绘画，以便它在客户端 x 和 y 位置的每个 mouseDrag 事件上绘制一些内容。

Sample Paint

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

这是我的，画得太快了。

My Paint

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);
}

Answer 1

您可以节省每次绘制的时间，并且每当您可能再次绘制时，检查自上次绘制以来是否已经过去了足够的时间。

这是一个例子:

const ctx = document.getElementById('canvas').getContext('2d');
const speedInput = document.getElementById('draw-speed');
let buffer = +speedInput.value;
let lastPaint;

ctx.canvas.onmousemove = ({ x, y }) => {
    const now = Date.now();
    if (!lastPaint || (now - lastPaint) > buffer) {
        lastPaint = now;
        ctx.fillRect(x, y, 10, 10);
    }
};

speedInput.onchange = ({ target }) => { 
    buffer = +target.value; 
};

canvas {
    border: 1px solid black;
}
label {
    display: block;
}

<canvas id="canvas"></canvas>
<label for="draw-speed">Draw speed</label>
<select id="draw-speed">
    <option>0</option>
    <option>50</option>
    <option selected>100</option>
    <option>150</option>
</select>