Loading ...Если вы хотите, чтобы ваша анимация, созданная с помощью canvas, загружалась быстрее и выглядела более четко, не забудьте при написании HTML-кода оптимизировать этот элемент.
При работе с анимацией с помощью элемента canvas производительность может стать значительной проблемой для сайта, так как растровые операции требуют долгую обработку, особенно при высоких разрешениях. Чтобы обойти эту проблему, можно воспользоваться одним из важных правил оптимизации, которое позволяет повторно использовать больше пикселей для отображения последующих кадров. Другими словами, принцип метода заключается в том, что чем меньше пикселей обрабатывает программа для воспроизведения каждого последующего кадра, тем быстрее ваш сайт будет работать.
Хорошим примером этой технологии является то, что при удалении пикселей clearRect(x,y,w,h) очищаются и перерисовываются только те пиксели, которые изменились. Это очень экономично при отображении элемента canvas на полноразмерном экране размером 1920×1280.
Композиционные режимы
Очень мощным инструментом при работе с canvas являются композиционные режимы (<2DContext> .globalCompositeOperation), которые могут быть использованы для применения масок и контроля наслоения среди других элементов. Существует очень широкий спектр доступных режимов, и в сочетании они могут выполнять очень сложные задачи.
Сглаживание
Для обеспечения субпикселей изображений все реализации в браузере canvas, прописанного в документе HTML, должны обрабатываться сглаживанием (хотя это не является обязательным требованием в спецификации HTML5). Сглаживание может быть важным, если вы хотите нарисовать четкие линии или полученная картинка выглядит слишком размытой. Чтобы обойти эту проблему вы должны довести круглые до целых значений или воспользоваться смещением на половину пикселя в зависимости от того, как вы используете заливку.
Очистка canvas
Чтобы очистить весь canvas от любых существующих пикселей, вы обычно используете функцию clearRect(x,y,w,h), но доступен и другой вариант. Всякий раз, когда устанавливается ширина и высота элемента, даже если они установлены на то же значение несколько раз, значение canvas сбрасывается. Это полезно знать при работе с динамическими размерами. Вы заметите, как ваши рисунки исчезают каждый раз, когда изменяется размер элемента. Canvas является одним из самых простых способов использовать анимацию на странице, оптимизируя его, вы сможете создавать привлекательные сайты, которые будут быстро загружаться в браузере пользователя.
