Холст расширяется при использовании CSS, но нормальный с “шириной” / свойства “высоты”

Question

Холст расширяется при использовании CSS, но нормальный с “шириной” / свойства “высоты”

У меня есть 2 холста, каждый использует HTML-атрибуты width и height измерять его, другое использование CSS:

<canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas>
<canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas>

Дисплеи Compteur1 как он должны, но не compteur2. Содержание натянуто использование JavaScript 300x300 холст.

Почему там различие в дисплее?

alt text

181

css html5 canvas height width

задан Martijn Pieters 27 June 2017 в 04:41

1 ответ

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

css html5 canvas height width

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

score 204 · Accepted Answer

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

Это объясняется на http://www.whatwg.org/html#attr-canvas-width (требуется JS) или http://www.whatwg.org/c# attr-canvas-width (вероятно, съест ваш компьютер):

Элемент canvas имеет два атрибута для управления размером растрового изображения элемента: width и ] высота . Эти атрибуты, если они указаны, должны иметь значения, которые являются действительными неотрицательными целыми числами . Правила для анализа неотрицательных целых чисел должны использоваться для получения их числовых значений. Если атрибут отсутствует или если анализ его значения возвращает ошибку, то вместо него должно использоваться значение по умолчанию. Атрибут width по умолчанию равен 300, а атрибут height - 150.