Край не устанавливает высоту на холсте должным образом - PullRequest
Новая
       25

Край не устанавливает высоту на холсте должным образом

0 голосов
/ 07 января 2019

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

var canvas = document.createElement('CANVAS');
canvas.width = 1020;
canvas.height = 150;

var w = canvas.getAttribute('width'); // gets 1020
var h = canvas.getAttribute('height'); // gets null

Открыть следующую скрипку в Chrome / Edge.

https://jsfiddle.net/gmuy4j95/4/

Решением этой проблемы является установка атрибута вручную. 

canvas.setAttribute('height', canvas.height);

Я нашел это, потому что наши ChartJ не корректно рендерились на Edge. Но даже в последней версии ChartJS используется метод getAttribute. Может кто-нибудь объяснить мне, что происходит? Я нигде не нашел этого сообщения об ошибке.

1 Ответ

0 голосов
/ 08 января 2019

По умолчанию размер холста равен 300 x 150, поэтому при установке высоты или ширины, равной размеру по умолчанию, он переопределяется

Таким образом, приведенные ниже настройки бесполезны: 

var canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 150;

document.getElementById('width').innerHTML = canvas.getAttribute('width');
document.getElementById('height').innerHTML = canvas.getAttribute('height');

Однако, если вы можете установить высоту или ширину, отличную от заданной по умолчанию, она должна отражаться и работать как в Edge, так и в Chrome. 

var canvas = document.createElement('canvas');
canvas.width = 1020;
canvas.height = 151;

document.getElementById('width').innerHTML = canvas.getAttribute('width');
document.getElementById('height').innerHTML = canvas.getAttribute('height');
...