Блог

Добрый вечер,

Я довольно новичок в HTML-холстах, и меня свела с ума проблема, с которой я сталкиваюсь и которую я не могу до конца понять.

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

Первая версия загрузки — неправильная:

Неудачная загрузка

Обновление страницы (и любое последующее обновление страницы) — правильное:

Успешная загрузка

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

Я применил следующее после прочтения о соотношении пикселей устройства, чтобы избежать общей проблемы размытых полотен:

 const ratio = Math.ceil(window.devicePixelRatio)  canvas.width = canvas.scrollWidth * ratio;  canvas.height = canvas.scrollHeight * ratio;  

Но моя проблема не в том, что полотна всегда размыты, а только иногда загружаются на первой странице, что ставит меня в тупик. После прочтения в Интернете я также попытался сделать следующее, но это не помогло:

 const ctx = canvas.getContext('2d');  ctx.imageSmoothingEnabled = false;