html5 canvas - ширину / высоту нужно определять inline?

Question

Я возился с HTML5 / Javascript и нашел что-то, чего я не понимаю.

Я пытался написать некоторые базовые процедуры для работы с холстом HTML5 и обнаружил, что функция drawImage не былаНичего не рисую.Чтобы понять, что это был мой код, я использовал код из существующего учебника, а именно HTML5 Canvas Image Tutorial .Когда я включил в него код Javascript извне (то есть в виде отдельного файла), я все еще не видел свое изображение, нарисованное на холсте.

Оттуда я скопировал полный источник, найденный здесь , дословно, и это сработало.Я начал возиться, чтобы выяснить, почему это работает, а мой нет.

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

<canvas id = "myCanvas" width = "600" height = "400"></canvas>

, но не работал, если я определял ширину и высоту холста во внешней таблице стилей CSS.

Я определил, что одной из моих проблем было то, чтоЯ включил таблицу стилей после файла Javascript;до этого мое изображение вообще не появлялось, даже после подтверждения с помощью функции alert (), что код внутри обработчика загрузки изображения запускался.После изменения порядка, в котором были включены файлы, мое изображение появилось, но было странно масштабировано, как если бы CSS-стиль игнорировался.

Почему это так?Я что-то упустил в отношении порядка, в котором свойства холста определяются через CSS?Почему Javascript игнорирует стилизацию CSS в этом случае?Если это вообще актуально, я пробовал это в последних версиях Chrome и Firefox.

Answer 1

У вас нет , чтобы написать их там, вы можете написать их позже в JavaSript:

var can = document.getElementById('canvas1');
can.width = 600;
can.height = 400;

Кстати, по умолчанию 300x150.

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

Answer 2

Согласно спецификации HTML5 это не требуется:

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

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html

Answer 3

Да, они должны быть записаны в атрибутах, иначе фактический размер холста будет равен 300 x 150.И если вы измените его размер с помощью css, он будет растянут / масштабирован так же, как и любое другое изображение.

Answer 4

элементы имеют два разных атрибута ширины и высоты.

Один обычно определяется встроенным (или позже в самом javascript).Это фактический размер в пикселях холста, используемый программой для рисования.

Одним из них является ширина и высота стиля.Это можно определить с помощью CSS (в то время как ширина и высота пикселя не могут).

Простой ответ - нет.Вы можете установить ширину и высоту в своем JavaScript, если хотите, но любая высота и ширина, которые вы назначаете с помощью CSS, изменят размер отображения холста (не фактический размер), что может исказить ваше изображение.