Книга: JavaScript. Подробное руководство, 6-е издание

21.4.3. Размеры и система координат холста

21.4.3. Размеры и система координат холста

Атрибуты width и height элемента <canvas> и соответствующие им свойства width и height объекта Canvas определяют размеры холста. По умолчанию начало системы координат холста (0,0) находится в его левом верхнем углу. Координата X увеличивается в направлении слева направо, а координата Y - сверху вниз. Координаты точек на холсте могут определяться вещественными значениями, и они не будут автоматически округляться до целых - для имитации частично заполненных пикселов объект Canvas использует приемы сглаживания.

Размеры холста являются настолько фундаментальными характеристиками, что они не могут изменяться без полного сброса холста в исходное состояние. Изменение значения свойства width или height объекта Canvas (даже присваивание им текущих значений) вызывает очистку холста, стирание текущего контура и переустановку всех графических атрибутов (включая текущее преобразование и область отсечения) в исходное состояние.

Несмотря на фундаментальность размеров холста, они необязательно совпадают с размерами холста на экране или с количеством пикселов, образующих поверхность для рисования. Размеры холста (а также система координат по умолчанию) измеряются в CSS-пикселах. CSS-пикселы обычно совпадают с обычными пикселами. Однако на устройствах высокого разрешения реализациям разрешено отображать несколько аппаратных пикселов в один CSS-пиксел. Это означает, что размеры прямоугольной области в пикселах, отведенной для холста, могут оказаться больше номинальных размеров холста. Об этом следует помнить при работе с механизмами холста, манипулирующими пикселами (раздел 21.4.14), но в других случаях различия между виртуальными CSS-пикселами и фактическим аппаратными пикселами не оказывают влияния на программный код, выполняющий операции с холстом.

По умолчанию элемент <canvas> отображается на экране с размерами (в CSS-пикселах), указанными в его HTML-атрибутах width и height. Однако, подобно любым другим HTML-элементам, элемент <canvas> может иметь экранные размеры, определяемые CSS-атрибутами стиля width и height. Если экранные размеры холста отличаются от его фактических размеров, пикселы холста автоматически будут масштабироваться в соответствии с экранными размерами, указанными в CSS-атрибутах. Экранные размеры холста никак не влияют на количество CSS- или аппаратных пикселов, зарезервированных в растровом отображении холста, а масштабирование выполняется как обычная операция масштабирования изображений. Если экранные размеры оказываются существенно больше фактических размеров холста, это приводит к появлению мозаичного эффекта. Однако это проблема скорее для художников и никак не влияет на программирование холста.

Оглавление книги