Javascript [CANVAS] "Замедлить частоту кадров?" - PullRequest
Новая
       49

Javascript [CANVAS] "Замедлить частоту кадров?"

0 голосов
/ 09 апреля 2020

как дела? Я борюсь с небольшой проблемой, которую я имею с моим кодом. Меня просят создать программу рисования с javascript, и я почти на месте, но я борюсь с тем, как быстро она рисует. Я нарисовал его так, чтобы он рисовал aws что-то на каждом событии mouseDrag на клиентских позициях x и y.

Образец краски

Посмотрите, как формы образца краски определены, и вы можете увидеть каждый из них, вот моя программа после рисования на холсте.

Вот мой, он рисует слишком быстро.

Моя краска 

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

1 Ответ

2 голосов
/ 10 апреля 2020

Вы можете сэкономить время каждого розыгрыша, и всякий раз, когда вы будете потенциально рисовать снова, проверьте, прошло ли достаточно времени с момента последней краски.

Вот пример: 

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>
...