Объекты, реализующие интерфейс CanvasPath, имеют путь. Путь (path) имеет список из нуля или более подпутей. Каждый подконтур состоит из списка из одной или нескольких точек, соединенных прямыми или сегменты изогнутой линии (curved line segments), и флага, указывающего, является ли подконтур закрытым или нет. Замкнутый подконтур — это тот, в котором […]
canvas
Объекты, реализующие интерфейс CanvasState, поддерживают стек состояний рисования. Состояния чертежа (Drawing states) состоят из: Текущая матрица преобразования. Текущая область отсечения. Текущие значения следующих атрибутов: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, filter, globalCompositeOperation, font, textAlign, textBaseline, direction, letterSpacing, fontKerning, fontStretch, fontVariantCaps, textRendering, wordSpacing, imageSmoothingEnabled, imageSmoothingQuality. Текущий список тире. Примечание Растровые изображения контекста визуализации не являются частью состояния рисования, поскольку они зависят от того, привязан ли контекст визуализации к элементу холста […]
Этот раздел не является нормативным. Выходное растровое изображение, когда оно не отображается непосредственно пользовательским агентом, реализации могут вместо обновления этого растрового изображения просто запоминать последовательность операций рисования, которые были применены к нему до тех пор, пока не потребуются фактические данные растрового изображения (например, из-за вызова drawImage() или фабричного метода createImageBitmap()). […]
Для веб-разработчиков (не нормативно) context.fillText(text, x, y [, maxWidth ]) Заполняет заданный текст в заданной позиции. Если указана максимальная ширина, текст будет масштабироваться в соответствии с этой шириной, если это необходимо. context.strokeText(text, x, y [, maxWidth ]) Обводит заданный текст в заданной позиции. Если указана максимальная ширина, текст будет масштабироваться в соответствии с этой шириной, если это необходимо. metrics = context.measureText(text) Возвращает объект […]
Стандартное поведение контекста визуализации определяет для текста выравнивание по левому краю (по началу текста). Это логично т. к. большинство языков имеют направление печати слева-направо. Но как можно выровнять текст на холсте canvas по центру или по правому краю (по концу текста)? В нашем примере будет создан блок canvas на странице […]
Шаг № 1 — Создаём объект canvas через JavaScript На первом шаге нам нужно получить новый объект холста canvas, который мы положим в переменную, чтобы иметь возможность управлять его содержимым. Для этого нам понадобится JavaScript и DOM, которые работают в браузере. let my_canvas = document.createElement('canvas'); Шаг № 2 — […]
По умолчанию размер холста canvas равен 300 на 150 пикселей. В большинстве случаев этот размер никуда не подходит и есть 100% необходимость его изменить. Как это сделать? За размеры холста canvas отвечают его HTML-атрибуты: width — ширина (горизонтальный размер) height — высота (вертикальный размер) Если мы «ручками» создаём HTML-разметку элемента […]
По умолчанию холсты canvas имеют размер 300 х 150 пикселей. Эти размеры получаются, если мы просто создаём новый объект элемента canvas в документе document при помощи языка JavaScript. let my_canvas = document.createElement('canvas'); Если сейчас мы обратимся к свойствам width и height, то получим: my_canvas.width 300 my_canvas.height 150 Информация из стандарта […]
Для веб-разработчиков (не нормативно) imagedata = new ImageData(sw, sh [, settings]) Возвращает объект ImageData с заданными размерами и цветовым пространством, указанным в настройках settings. Все пиксели в возвращаемом объекте прозрачно-чёрные. Выдает исключение DOMException «IndexSizeError«, если любой из аргументов ширины или высоты равен нулю. imagedata = new ImageData(data, sw [, sh [, settings ] ]) Возвращает объект ImageData, используя данные, предоставленные в аргументе Uint8ClampedArray, […]
Для веб-разработчиков (не нормативно) context.imageSmoothingEnabled [ = value ] Возвращает значение заполнения шаблона, и метод drawImage() попытается сгладить изображения, если их пиксели не совпадают точно с дисплеем при масштабировании изображений. Можно установить, чтобы изменить, сглаживаются ли изображения (true) или нет (false). context.imageSmoothingQuality [ = value ] Возвращает текущее предпочтение качества сглаживания изображения. Можно установить, чтобы изменить […]
Данная публикация является переводом на русский язык официальной версии стандарта HTML, расположенного по адресу https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-element На 02.01.2022 раздел называется «4.12.5 The canvas element» Категории: Поточное содержание. Фразовое содержание. Встроенное содержание. Ощутимое содержание. Контексты, в которых можно использовать этот элемент: Где ожидается встроенное содержание. Модель контента: Прозрачный, но без интерактивных потомков […]
Этот раздел не является нормативным. Утечка информации (Information leakage) может произойти, если скрипты из одного источника могут получить доступ к информации (например, считывать пиксели) из изображений из другого источника (не того же самого). Чтобы смягчить это, растровые изображения, используемые с элементами холста canvas и объектами ImageBitmap, определены так, чтобы иметь […]
Для веб-разработчиков (не нормативно) context.font [ = value ] styles.font [ = value ] Возвращает текущие настройки шрифта. Можно установить, чтобы изменить шрифт. Синтаксис такой же, как и для свойства CSS ‘font‘; значения, которые не могут быть проанализированы как значения шрифта CSS, игнорируются. Относительные ключевые слова и длины вычисляются относительно шрифта элемента холста canvas. context.textAlign [ = value ] […]
Для веб-разработчиков (не нормативно) context.lineWidth [ = value ] styles.lineWidth [ = value ] Возвращает текущую ширину линии. Может быть установлен, чтобы изменить ширину линии. Значения, не являющиеся конечными значениями больше нуля, игнорируются. context.lineCap [ = value ] styles.lineCap [ = value ] Возвращает текущий стиль окончания строки. Можно установить, чтобы изменить стиль окончания линии. Возможные стили окончания линии: «стык», «круглый» и […]
Для веб-разработчиков (не нормативно) context = canvas.getContext(contextId [, options ]) Возвращает объект, предоставляющий API для рисования на холсте. contextId указывает желаемый API: «2d», «bitmaprenderer», «webgl», «webgl2» или «webgpu». options обрабатываются этим API. Эта спецификация определяет контексты «2d» и «bitmaprenderer» ниже. Спецификации WebGL определяют контексты «webgl» и «webgl2». WebGPU определяет контекст «webgpu». [WEBGL] [WEBGPU] Возвращает null, […]
Для веб-разработчиков (не нормативно) canvas.transferControlToOffscreen() Возвращает только что созданный объект OffscreenCanvas, который использует элемент холста canvas в качестве заполнителя. После того, как элемент холста canvas стал заполнителем для объекта OffscreenCanvas, его внутренний размер больше не может быть изменен, и он не может иметь контекст визуализации. Содержимое холста-заполнителя обновляется путем вызова […]
Для веб-разработчиков (не нормативно) canvas.toBlob(callback [, type [, quality ] ]) Создаёт объект Blob, представляющий файл, содержащий изображение на холсте, и вызывает обратный вызов с дескриптором этого объекта. Второй аргумент, если он указан, управляет типом возвращаемого изображения (например, PNG или JPEG). По умолчанию это «image/png»; этот тип также используется, если данный тип не […]
Для веб-разработчиков (не нормативно) url = canvas.toDataURL([ type [, quality ] ]) Возвращает data: URL изображения на холсте. Первый аргумент, если он указан, управляет типом возвращаемого изображения (например, PNG или JPEG). По умолчанию это «image/png»; этот тип также используется, если данный тип не поддерживается. Второй аргумент применяется, если тип представляет собой формат изображения, который поддерживает переменное […]