Организовать некоторые новые особенности HTML5 и общие свойства холста

Эта статья в основном представляет некоторые новые функции HTML5 и сортировку общих свойств холста. Canvas API является важным контентом, используемым в HTML5 для рисования графики. Друзья, которые нуждаются в этом, могут ссылаться на следующее 1. Типы контента HTML5

намекать

API Selectors не просто удобен. Когда дело доходит до пересечения DOM, API селекторов обычно быстрее, чем предыдущий API поиска дочерних узлов. Чтобы реализовать быструю таблицу стилей, браузер сильно оптимизирует сопоставление селекторов.

Canvas, по сути, является растровым холстом, где нарисованная на нем графика не является масштабируемой и не может быть увеличена и уменьшена, как изображение SVG. Кроме того, объекты, нарисованные с холстом, не принадлежат структуре DOM страницы или любому пространству имен.

Программирование с холстом, вы должны сначала получить его контекст. Затем выполните действия в контексте и, наконец, примените эти действия к контексту.

Координаты в холсте начинаются с верхнего левого угла, ось X простирается вправо в горизонтальном направлении (по пикселям), а ось Y простирается вниз в вертикальном направлении. Точка с координатами верхнего левого углу x = 0 и y-0 называется источником.

Как и большинство HTML -элементов, элемент Canvas также может добавлять границы, применяя CSS, устанавливая внутреннюю маржу, внешнюю маржу и т. Д., И некоторые атрибуты CSS также могут быть унаследованы элементами в холсте.

Коррекция - В системе чертежа утверждение является преобразованием - может быть применено последовательно, комбинировано или модифицировано по желанию при применении. Результаты каждой операции чертежа должны быть скорректированы через коррекционный слой, прежде чем он будет отображаться на холсте. Хотя это добавляет дополнительную сложность, он добавляет более мощные функции в систему рисования, которая может поддерживать обработку изображений в реальном времени, такие как текущие инструменты редактирования изображений, поэтому необходима сложность этой части контента в API.

Существует важное предложение о многоразовом коде: как правило, чертеж должен начинаться с начала координат (0,0 точек в системе координат), применение преобразования (масштабирование, перевод, вращение и т. Д.), А затем постоянно изменять код до тех пор, пока не будет достигнут желаемый эффект.

функция контекста пути

(1) Moveto (x, y): не рисует, просто переместите текущую позицию в новую координату назначения (x, y);

(2) Lineto (x, y): не только перемещает текущую позицию в новую целевую координату (x, y), но также проводят прямую линию между двумя координатами.

(3) closePath (): поведение этой функции очень похоже на Lineto. Единственное отличие состоит в том, что ClosePaht автоматически использует начальную координату пути в качестве целевой координаты. ClosePath также сообщает об холсте, что нарисованная в настоящее время цифра была закрыта или сформировала полностью закрытую область, которая очень полезна для будущих заполнений и инсультов.

(4) Strokerect (): Нарисуйте контур прямоугольника на основе данной позиции и координат.

(5) clearRect (): очистить все содержание в области прямоугольника и восстановить его до начального состояния, то есть прозрачный цвет.

(6) QuadraticCurveto (): отправной точкой рисунка функции. Кривая является текущая координата с двумя наборами (x, y) краев. Вторая группа относится к конечной точке кривой. Первая группа представляет контрольные точки. Так называемая контрольная точка расположена рядом с кривой (не выше кривой), и ее эффект эквивалентен созданию силы натяжения на кривой. Регулируя положение контрольной точки, кривизна кривую может быть изменена.

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

Градиент относится к использованию поэтапных алгоритмов отбора проб на наборах цветов и применении результатов к стилям удара и стилям заполнения.

Использование градиентов требует трех шагов:

(1) создать градиентный объект;

(2) установить цвет для градиентных объектов и указать метод перехода;

(3) Установите градиенты для стилей заполнения или стилей удара в контексте.

Чтобы установить, какой цвет отображает, используйте функцию addColorStop на объекте градиента. Эта функция позволяет определять два параметра: цвет и смещение. Параметры цвета - это цвета, которые разработчики хотят использовать, когда они ослаблены или заполнены в смещенных положениях. Смещение составляет значение от 0,0 до 1,0, что представляет, насколько далеко расстояние должно меняться вдоль градиентной линии.

В дополнение к линейным градиентам, HTML5 Canvas API также поддерживает радиоактивные градиенты. Так называемый радиоактивный градиент означает, что цвет плавно меняется в конической области между двумя указанными кругами. Цветовые точки завершения, используемые для радиоактивных градиентов и линейных градиентов, одинаковы.