JavaScript. Подробное руководство, 6-е издание, Флэнаган Дэвид

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

на обложку

Флэнаган Дэвид

Шрифт:

Если вам потребуется больше гибкости, чем может обеспечит простой стек графических свойств, вы можете определить вспомогательные методы, такие как в примере 21.5.

Пример 21.5. Утилиты управления графическими свойствами

// Восстанавливает последние сохраненные значения графических свойств,

// но не выталкивает их со стека.

CanvasRenderingContext2D.prototype.revert = function {

this.restore; //

Восстановить прежние значения графических свойств.

this.save; // Сохранить их снова, чтобы можно было вернуться к ним.

return this; // Позволить составление цепочек вызовов методов.

};

// Устанавливает графические атрибуты в соответствии со значениями свойств объекта о.

// Или, при вызове без аргументов, возвращает текущие значения атрибутов в виде объекта.

// Обратите внимание, что этот метод не обслуживает преобразование или область отсечения.

CanvasRenderingContext2D.prototype.attrs = function(o) {

if (о) {

for(var a in о) // Для каждого свойства объекта о

this[a] = о[а]; // Установить его как графический атрибут

return this; // Позволить составление цепочек вызовов методов

}

else return {

fillStyle: this.fillStyle,

font: this.font,

globalAlpha: this.globalAlpha,

globalCompositeOperation: this.globalCompositeOperation,

lineCap: this.lineCap,

lineJoin: this.lineJoin,

lineWidth: this.lineWidth,

miterLimit: this.miterLimit,

textAlign: this.textAlign,

textBaseline: this.textBaseline,

shadowBlur: this.shadowBlur,

shadowColor: this.shadowColor,

shadowOffsetX: this.shadowOffsetX,

shadowOffsetY: this.shadowOffsetY, strokeStyle: this.strokeStyle

};

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- или аппаратных пикселов, зарезервированных в растровом отображении холста, а масштабирование выполняется как обычная операция масштабирования изображений. Если экранные размеры оказываются существенно больше фактических размеров холста, это приводит к появлению мозаичного эффекта. Однако это проблема скорее для художников и никак не влияет на программирование холста.