Javascript [CANVAS] “减慢帧率？”

Question

你好吗？ 我正在努力解决我的代码遇到的一个小问题。 我被要求用 javascript 创建一个绘画程序，我快到了，但我正在为它的绘画速度而苦苦挣扎。 我让它绘画，以便它在客户端 x 和 y position 的每个 mouseDrag 事件上绘制一些东西。

样品油漆

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

这是我的，它画得太快了。

我的油漆

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>