Как остановить дрожание при рендеринге текста в HTML-холсте [дубликат]

Question

Как остановить дрожание при рендеринге текста в HTML-холсте [дубликат]

Для тех, кто хочет использовать переменную с методом совпадения, это сработало для меня

var alpha = 'fig';
'food fight'.match(alpha + 'ht')[0]; // fight

1

javascript canvas html5-canvas render

задан Northern Captain 21 April 2017 в 14:53

3 ответа

Другие вопросы по тегам:

javascript canvas html5-canvas render

Похожие вопросы:

score 2 · Accepted Answer

Из-за этого:

var radius = 15;

var cnv = createHiDPICanvas(radius*2, radius*2, 2);
var ctx = cnv.getContext("2d");

Когда вы увеличиваете размер холста, который вы создаете на createHiDPICanvas(2000,2000, ...), движение разглаживается. Прямо сейчас вы создаете очень маленький разрешающий холст (30px на 30px), и текст выглядит неустойчивым, потому что он перемещается по очень маленькому диапазону пикселей.

Пример: https: // jsfiddle .net / 6xr4njLm /

Более длинное объяснение createHiDPICanvas: Как исправить размытый текст в моем холсте HTML5?

2

ответ дан Community 17 August 2018 в 21:07

1

Что делать, если мне нужно создать сотню таких контактов для отображения, и каждый будет выделять холст 3000х3000. Как насчет потребления памяти? – Northern Captain 21 April 2017 в 18:27
2

Также я не понимаю, почему fillText производит вертикальное дрожание, но хорошо работает в горизонтальном движении? – Northern Captain 21 April 2017 в 18:35
3

В вашем примере я вернул значение скорости до 180 для достижения медленного и плавного движения, как требуется в моей задаче, и не вижу абсолютно никакой разницы между вашим холстом 3000x3000 и моим 30x30 ... – Northern Captain 21 April 2017 в 19:31
4

Извините, но я не вижу разницы между вашим методом и моим методом. 3. Техника одинакова - создайте заставку на холсте, нарисуйте текст там с тем же размером, а затем скопируйте этот холст на экранный. Текст на экране все еще размыт, как я упомянул для метода 3. – Northern Captain 23 April 2017 в 19:34
5

@NorthernCaptain, ты совершенно прав, я неправильно понял ваш вопрос, извините. Я пытался отредактировать его, чтобы он улучшал его. – Kaiido 24 April 2017 в 06:28
6

Кайдо, благодарю вас за усилия, я сделал тот же вывод, чтобы привлечь к экрану холст с удвоенным размером, а затем сжиматься при копировании на холст. Это мой метод 2 в вопросе;) К сожалению, у него тоже есть проблемы. – Northern Captain 27 April 2017 в 16:39
7

@NorthernCaptain В этом ответе я не уменьшаюсь при рисовании видимого холста, сам видимый холст тоже масштабируется и является единственным масштабируемым, но с помощью CSS (так что мониторы с высоким разрешением на дюйм имеют достаточное количество пикселей для рендеринга) – Kaiido 27 April 2017 в 23:00
8

Ага, я вижу, спасибо, что указал. Это означает, что у меня должно быть все двойное значение, чтобы рисовать на этом огромном холсте, поскольку у меня есть не только эти контакты, но и другие объекты, такие как спрайт-изображения. Это увеличит время загрузки, использование ЦП и ухудшит производительность на медленных машинах, если холст достаточно велик. – Northern Captain 28 April 2017 в 07:29

score 2 · Accepted Answer

2

ответ дан Community 6 September 2018 в 13:33

score 2 · Accepted Answer

2

ответ дан Community 29 October 2018 в 20:00