时间戳

首页 > 解决方案 > Javascript [CANVAS]“减慢帧率？”

javascript - Javascript [CANVAS]“减慢帧率？”

问题描述

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

样品油漆

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

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

我的油漆

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

标签： javascripthtmlcanvaspaint

解决方案

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

这是一个例子：

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>

推荐阅读