HTML Canvas Reference
❮ Предыдущий Далее ❯
Справочник по холсту HTML
Тег HTML используется для рисования графики на лету с помощью сценариев.
(обычно JavaScript).
Чтобы узнать больше о , пожалуйста
прочитайте наш учебник HTML Canvas.
Цвета, стили и тени
| Свойство | Описание |
|---|---|
| стиль заполнения | Задает или возвращает цвет, градиент или узор, используемые для заливки рисунка |
| Стиль хода | Задает или возвращает цвет, градиент или узор, используемые для обводки |
| теневой цвет | Задает или возвращает цвет теней |
| теньРазмытие | Задает или возвращает уровень размытия теней |
| shadowOffsetX | Устанавливает или возвращает горизонтальное расстояние тени от фигуры |
| shadowOffsetY | Задает или возвращает вертикальное расстояние тени от фигуры |
| Метод | Описание |
|---|---|
| создатьЛинейныйГрадиент() | Создает линейный градиент (для использования в содержимом холста) |
| создать шаблон () | Повторяет указанный элемент в указанном направлении |
| createRadialGradient() | Создает радиальный/круговой градиент (для использования в содержимом холста) |
| addColorStop() | Указывает цвета и позиции остановки в объекте градиента |
Стили линий
| Свойство | Описание |
|---|---|
| LineCap | Задает или возвращает стиль заглавных букв для строки |
| линияПрисоединиться | Задает или возвращает тип создаваемого угла при пересечении двух линий |
| ширина строки | Задает или возвращает текущую ширину линии |
| митраЛимит | Задает или возвращает максимальную длину скоса |
Прямоугольники
| Метод | Описание |
|---|---|
| прямоугольник() | Создает прямоугольник |
| fillRect() | Рисует «закрашенный» прямоугольник |
| StrokeRect() | Рисует прямоугольник (без заливки) |
| ClearRect() | Очищает указанные пиксели в заданном прямоугольнике |
Пути
| Метод | Описание |
|---|---|
| заполнение() | Заполняет текущий рисунок (путь) |
| ход() | На самом деле рисует заданный вами путь |
| начало пути() | Начинает путь или сбрасывает текущий путь |
| перейти() | Перемещает путь в указанную точку на холсте, не создавая линию |
| закрыть путь() | Создает путь от текущей точки обратно к начальной точке |
| строкаTo() | Добавляет новую точку и создает линию до этой точки от последней указанной точки на холсте |
| клип() | Вырезает область любой формы и размера из исходного холста |
| квадратичныйCurveTo() | Создает квадратичную кривую Безье |
| кривая Безье () | Создает кубическую кривую Безье |
| дуга() | Создает дугу/кривую (используется для создания кругов или частей кругов) |
| дуга() | Создает дугу/кривую между двумя касательными |
| isPointInPath() | Возвращает true, если указанная точка находится на текущем пути, иначе false |
Преобразования
| Метод | Описание |
|---|---|
| масштаб() | Увеличение или уменьшение масштаба текущего чертежа |
| поворот() | Поворот текущего чертежа |
| перевести() | Переназначает позицию (0,0) на холсте |
| преобразование() | Заменяет текущую матрицу преобразования для чертежа |
| setTransform() | Сбрасывает текущее преобразование в единичную матрицу. Затем бежит
трансформировать() |
Текст
| Свойство | Описание |
|---|---|
| шрифт | Задает или возвращает текущие свойства шрифта для текстового содержимого |
| Выравнивание текста | Задает или возвращает текущее выравнивание для текстового содержимого |
| текстБазовый уровень | Задает или возвращает текущую базовую линию текста, используемую при рисовании текста |
| Метод | Описание |
|---|---|
| fillText() | Рисует «заполненный» текст на холсте |
| штрихтекст() | Рисует текст на холсте (без заливки) |
| мератекста() | Возвращает объект, содержащий ширину указанного текста |
Рисование изображения
| Метод | Описание |
|---|---|
| DrawImage() | Рисует изображение, холст или видео на холсте |
Управление пикселями
| Свойство | Описание |
|---|---|
| ширина | Возвращает ширину объекта ImageData |
| высота | Возвращает высоту объекта ImageData |
| данные | Возвращает объект, содержащий данные изображения указанного объекта ImageData |
| Метод | Описание |
|---|---|
| createImageData() | Создает новый пустой объект ImageData |
| getImageData() | Возвращает объект ImageData, который копирует данные пикселей для указанного прямоугольника на холсте |
| положитьImageData() | Помещает данные изображения (из указанного объекта ImageData) обратно на холст |
Композиция
| Недвижимость | Описание |
|---|---|
| глобальный Alpha | Задает или возвращает текущее значение альфа-канала или прозрачности рисунка |
| globalCompositeOperation | Устанавливает или возвращает способ наложения нового изображения на существующее изображение |
Прочее
| Метод | Описание |
|---|---|
| сохранить() | Сохраняет состояние текущего контекста |
| восстановить() | Возвращает ранее сохраненное состояние пути и атрибуты |
| создать событие() | |
| получитьконтекст() | |
| toDataURL() |
❮ Предыдущий Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебник по HTMLУчебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.
CSS Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
9000 3
Основные каталожные номера
Справочник по HTMLСправочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Основные примеры
Примеры HTMLПримеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
ФОРУМ | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности. Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
Выбор библиотеки или платформы JavaScript Canvas | Доктор Абстракт
Выбор библиотеки или платформы JavaScript Canvas | Доктор Абстракт | MediumВаш путеводитель по
Холст отлично подходит для игр, рисунков и приложений в браузере 9 мин чтения·
21 июля 2020 г.Библиотеки и платформы JavaScript Canvas :: главные страницыДобро пожаловать, читатели из ◎ Ваш путеводитель по творческому программированию на Canvas
Canvas — это относительно новый тег в HTML с API JavaScript, который позволяет кодерам динамически рисовать изображения для отображения в браузере. В…
Автор: Dr Abstract
180 подписчиков
Изобретатель, основатель ZIM JavaScript Canvas Framework и Nodism, профессор интерактивных медиа в Sheridan, Canadian New Media Awards Программист и преподаватель
Еще от Dr Abstract 900 06
Доктор Abstract
Ваш путеводитель по: Управление Canvas с помощью JavaScript
Как заставить Canvas делать удивительные вещи!
·13 мин чтения·3 августа 2020 г.
Dr Abstract
в
Кодирование для повышения уровня
Что такое интерактивная анимация
и как ее создать?
·4 минуты чтения·28 сентября 2022 г.Dr Abstract
в
Кодирование для повышения уровня
Создание интерактивных NFT
90 575 Учебник от начала до конца!
·7 минут чтения·12 августа 2021 г.Dr Abstract
Ваш путеводитель по адаптивному дизайну на холсте
Эти элементы управления холстом помогут сделать ваше приложение идеальным!
·9 минут чтения·31 июля 2020 г.Просмотреть все от Dr Abstract
Рекомендовано Medium
The PyCoach
в
Искусственный уголок
9000 2Вы используете ChatGPT неправильно! Вот как опередить 99% пользователей ChatGPT
Освойте ChatGPT, изучив технику быстрого доступа.
·7 минут чтения·17 мартаСомнатх Сингх
на
JavaScript на простом английском
Кодирование перестанет существовать через 5 лет.
