Блог

Главная - Вопросы по программированию - Линии HTML-холста нарисованы мерзко

Линии HTML-холста нарисованы мерзко

#javascript #html5-canvas

Вопрос:

У меня проблемы с HTML-холстом. Когда я быстро перемещаю линию, она рисуется резким образом, и я вижу несколько линий. Я не знаю, проблема ли это с частотой кадров и моими глазами, или я делаю что — то не так… Вот мой код:

 const can = document.getElementById('can');
const ctx = can.getContext('2d');

can.width = innerWidth;
can.height = innerHeight;

function triangle(x1, y1, x2, y2){
    ctx.strokeStyle = "blue";
    ctx.lineWidth = "2";
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x2, y2);
    ctx.lineTo(x2, y2   (y1 - y2));
    ctx.strokeStyle = "#33cc33";
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x2, y2   (y1 - y2));
    ctx.lineTo(x1, y1);
    ctx.strokeStyle = "red";
    ctx.stroke();
}

addEventListener('mousemove', (e)=>{
    ctx.clearRect(0, 0, can.width, can.height);
    triangle(can.width / 2, can.height / 2, e.clientX, e.clientY);
});  
 <canvas id="can"></canvas>

Заранее спасибо!

PS: Если на вопрос уже дан ответ где-то в другом месте, мне очень жаль, я немного поискал и не смог его найти…

Комментарии:

1. Что такое loop ?

2. О, извините, я немного изменил код и забыл его удалить, отредактировал сообщение

3. То, что вы описываете, звучит как настойчивость видения . Если это так, то решением было бы нарисовать размытое изображение между двумя рисунками, но я не уверен, что это стоит боли. Просто чтобы быть уверенным, в каком браузере вы столкнулись с этой проблемой?

4. Это вполне может быть, и я не знаю, есть ли решение этой проблемы, поскольку это происходит только тогда, когда вы перемещаете линию в довольно быстром темпе.

5. Старые ЖК-дисплеи имеют медленную скорость переключения (время для ориентации кристаллов между состояниями включения / выключения). Средние современные ЖК-дисплеи имеют скорость переключения около 5 мс, и, таким образом, примерно 1/3 кадра сохраняется в прежнем состоянии пикселей. Это можно смягчить, уменьшив количество изменений между кадрами (например, сделайте линию ярче / темнее при обнаружении быстрого движения))

Метки: