Улучшаем производительность HTML5 canvas / Хабр

Улучшаем производительность HTML5 canvas / Хабр

Вступление

HTML5 canvas, который начинался, как эксперимент компании Apple, – наиболее широко распространенный стандарт для 2D

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

Существует множество разбросанных повсюду «премудростей» оптимизации canvas. Эта статья нацелена на объединение их, чтобы создать более читабельный ресурс для разработчиков. Статья включает как фундаментальные оптимизации, которые относятся ко всем областям компьютерной графики, так и конкретные техники для canvas, которые меняются по мере развития реализаций canvas.

Имейте в виду, эта статья не является учебником по HTML5 canvas. Но вы можете изучить соответствующие статьи на HTML5Rocks, вот эту главу на Dive into HTML5 и уроки на MDN.

Зачем нужен Canvas, что это вообще такое, какова поддержка браузерами, какова основная область применения, насколько развиты фреймворки, примеры?

Canvas — низкоуровневое API для отрисовки графики. Поддерживается всеми современными браузерами. Естественно, не поддерживается устаревшими версиями IE (8 и ниже)

Фреймворки развиваются, хотя им ещё нужно повзрослеть. Базовые примеры можно

. Более мощные примеры можно поискать на сайтах а-ля

или в примерах приложений на фреймворках, например

Почему не работает код (заливка фона в canvas)?

Дело в том, что canvas по-умолчанию имеет чёрный полностью прозрачный цвет. Т.е. для каждого пикселя каждая цветовая компонента и альфа-канал установлены в ноль.

Нарисуем на маленьком canvas размером 8х8 пикселей небольшой прямоугольник чёрного цвета:

let canvas = document.getElementById('canvas'); //canvas.width == canvas.height == 8
let context = canvas.getContext('2d');
context.strokeStyle = "black";
context.strokeRect(2, 2, 4, 4);

Canvas, увеличенный в 8 раз:

Canvas

Массив пикселей, полученный с помощью getImageData выглядит следующим образом: red, green и blue компоненты каждого пикселя установлены в ноль, а матрица альфа-канала выглядит так:

0   0   0   0   0   0   0   0
0  64 128 128 128 128  64   0
0 128 192 128 128 191 128   0
0 128 128   0   0 127 128   0
0 128 128   0   0 127 128   0
0 128 191 127 127 191 128   0
0  64 128 128 128 128  64   0
0   0   0   0   0   0   0   0

Теперь становится понятно, почему ваш код не работает. В цикле

for(var i = 0; i < pix.data.length; ) {
    if(pix.data[i] > 0) {
        ...
    }
    i = i   4;
}

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

Если проверку pix.data[i] > 0 заменить на pix.data[i] == 0, то теперь под условие попадут все пиксели canvas, и цвета всех пикселей будут успешно модифицированы. Вот только вы ни как не изменяете альфа-канал, поэтому при отрисовке изменённых пикселей изменения будут видны только у тех пикселей, чей альфа-канал отличен от нуля. В вашем случае это будет всего-лишь контур прямоугольника.

. Мне было бы очень интересно послушать про типовые реализации основного функционала canvas-библиотек, таких как: эмуляция слоев, определение активного элемента (на котором в данный момент находится курсор), создание системы управления событиями и т. д.


Этот вопрос задавали мне чаще всего, потому для него —

Что такое canva

Canva — кроссплатформенный инструмент для медиа-контента, объединяющий в себе графический конструктор, каталог шаблонов, фото- и видеоредактор, а также библиотеку стоковых фотографий, видео и музыки. В нём можно создать баннер для сайта, короткое видео, презентацию, статичное или анимированное изображение для поста в Инстаграм, дизайн электронной рассылки и многое другое.

Основная аудитория Canva — индивидуальные предприниматели, маркетологи, блогеры, фрилансеры, малый и средний бизнес, некоммерческие организации. Многие пользователи используют приложение в личных целях — создают открытки, резюме, планеры-еженедельники и т.д.

Основные плюсы:

  • Простота использования.
  • Обширный бесплатный функционал.
  • Совместимость со всеми устройствами.
  • Полная локализация на русский язык.
  • Инструменты для командной работы.
  • Библиотека шаблонов в любых стилях.
  • Огромный фотобанк для личных и коммерческих целей.
  • Продвинутый инструмент для презентаций.

. Поддержка и быстродействие на Android/iOS устройствах

Поддерживается полностью. Правда, я на iPhone2 заметил неподдержку fillText, но это единственное.


Проблема с производительностью, но кое-что можно запустить. Пока для мобильников лучше использовать CSS3. Возможно, в будущем, что-то поменяется.

. Интересует самый быстрый способ нарисовать точку (например, для графика). Однопиксельную и четырёхпиксельную, произвольного цвета.

Самый быстрый с точки зрения производительности — использовать fillRect для одиночных отрисовок и getImageData putImageData для массовых отрисовок.

. Редакторы — в чём писать?

Подходит любой редактор JavaScript. Раньше я пользовался Netbeans 7, сейчас перешёл на Jetbrains WebIde

. База данных

Для хранения данных на стороне клиента есть два современных стандарта —


IndexedDB — это крутой интерфейс с кучей возможностей,

, а webStorage —

. Canvas и IE

В IE до девятой версии не поддерживается. Все попытки сделать его поддерживаемыми можно назвать подходящими только для очень узкого круга задач и не дают вменяемой скорости.

Имхо, единственный вариант — это

, плагин, который устанавливается на полубраузер как Flash или SilverLight и превращает

говно в конфетку

Internet Explorer в современный браузер.

. Как посчитать расстояние между нарисованными объектами, есть ли готовые решения

Зависит от объектов. Некоторые вещи делаются очень просто. Например, расстояние между точками считается по теореме Пифагора. Между кругами — считаем расстояние между точками от отнимаем радиусы. У более сложных фигур есть свои законы.

Кое-что (по крайней мере пересечения ректанглов/кругов/полигонов) уже есть в

. Если у вас какие-то особые требования — необходимо искать алгоритмы. Я могу посоветовать вот что:

. Как и какими средствами лучше делать анимации на Canvas?


Недавно был неплохой топик »

«. Также, в комментариях я

. Работа с текстом в Canvas (в т.ч. анимирование)

Текст

. Свои шрифты


На него воздействуют все правила — такие как тени, трансформации, установка цветов и т.п. К примеру, с помощью светлой тени на тёмном фоне, можно легко

Когда нужно использовать Canvas, а когда Flash?

Flash быстрее, кроссбраузернее, с хорошими инструментами и фреймворками.

Canvas сейчас используется, в основном, энтузиастами и экспериментаторами.

Особой причины уходить с рынка флешерам нету.

Но Canvas’ом занимаются такие крупные игроки, как Google, Mozilla, Apple, Microsoft, все они оптимизируют и ускоряют отрисовку Canvas, постепенно отмирают старые браузеры и приходят новые. Посмотрите на Firefox 2.0 и Firefox 4.0. За три года скорость увеличилась на порядок и основной скачок сделан именно с выходом четвёртой версии.

. Работа с изображениями.

Как работать с изображениями

. Использование Бэк Буффера, как отрисовать один Canvas в другой.

Вы можете отрисовать какую-либо информацию в скрытый Canvas, который затем использовать точно так же как картинку (смотреть предыдущий пункт).

Буферизация позволяет ускорить отрисовку многократно. Например,


Использовать очень просто:

// Создаём буфер нужного размера:
var buffer = document.createElement('canvas');
buffer.width  = 64;
buffer.height = 32;
buffer.ctx    = buffer.getContext('2d');
// или при помощи LibCanvas:
var buffer = LibCanvas.Buffer(64, 32, true);

// Отрисовываем в него всё необходимое
buffer.ctx.fillRect(/* */)

// отрисовываем его на наш холст:
var ctx = canvas.getContext('2d');
ctx.drawImage( buffer, 0, 0 );

. Анимация в канвасе происходит методом полной перерисовки. Таким образом информация обо всех объектах хранится в объекте JS и каждый раз перерисовывается, или можно как то создавать спрайты и слои?

. Отрисовка SVG в Canvas

Можно при помощи

. Смысла практически нету)

. Насколько различается поддержка в браузерах или все следуют стандарту?


Различия минимальны. Обнаруживались мелкие баги, легкие несоответствия. Например, Опера не могла отрисовать прямоугольник с отрицательными размерами сторон:

ctx.fillRect(50, 50, -20, -20);

По разному сжимаются и поворачиваются картинки. Например, в Хроме при повороте на углах заметны зубья (нету сглаживания)

Улучшаем производительность HTML5 canvas / Хабр

Зато он лучше, чем Fx и Opera растягивает картинки:

Улучшаем производительность HTML5 canvas / Хабр

Есть ещё мелкие различия в JavaScript. Например, в некоторых браузерах sort реализует неустойчивую сортировку, так что, если элементы сортировать по Z-индексу, то элементы с одинаковым Z-индексом будут менятся местами.

Это очень мелкие нюансы. Большинство — скрыто за дружелюбным API фреймворков. Лично я разрабатываю только под один браузер и в большинстве случаев всё работает совершенно корректно и в остальных.

. putImageData vs drawImage

Буду краток —

. Более того, с увеличением размеров картинки — увеличивается медлительность.

Когда использовать Canvas, а когда SVG?


Это холиварная тема. Есть разные взгляды на неё.

Почитайте это обсуждение:

Какую литературу почитать?

Рекомендую начать с

, там очень классно и с примерами описаны основы Canvas. После этого придумайте себе задание и постарайтесь его реализовать. API — очень простой, тут главное — опыт.

Есть свежая книжка «HTML5 Canvas» издательства O’Reilly Media. Я не читал, но O’Reilly обычно выпускают классные книжки.
Улучшаем производительность HTML5 canvas / Хабр

Как сделать скриншот Canvas?


Есть небольшая библиотека

она позволяет сохранять Canvas что на сервер, что на клиент. На клиенте сохранение производится при помощи toDataURL. На сервере получается содержимое при помощи getImageData, транслируется в base64 код и отправляется POST-запросом. На сервере достаточно сделать что-то типа такого кода:

Интересуют методы улучшения быстродействия (поднятие fps).

Есть разные методы оптимизации, которые зависят от приложения. Три из них я описывал в топике

. Это:

* Обновление холста исключительно при необходимости

* Вместо перерисовки всего холста перерисовывать только изменившиеся куски

* Отрисовка объектов в буфер (что позволяет рисовать объект каждый кадр как набор пикселей, а не применять все фильтры и кучу матана)


Вам очень поможет профайлер в вашем любимом браузере.

Работа с видеозахватом

Если вы про захват видео с камеры:
API есть только в черновике спецификации Media Capture API ближайший релиз спецификации возможен в PhoneGap — возможно есть в транке. Работать с ним будет очень просто. Вешается обработчик на «устройство», каждый кадр передается в виде картинки в формате data uri:

function success(data) {
  var container = document.createElement("div");
  
  for (var i in data) {
    var img = document.createElement("img");
    img.src = data[i].url;
    container.appendChild(img);
  }
  document.body.appendChild(container);

}
 
function error(err) {
  if (err.code === err.CAPTURE_INTERNAL_ERR) {
    alert("The capture failed due to an internal error.");
  }
  else {
    alert("Other error occured.");
  }
}
 
navigator.device.capture.captureImage(success, error, { limit: 1 });

Каково самое эффективное решение на данный момент для попиксельного доступа при отрисовке произвольного изображения на Canvas (без WebGL)? Например, ручная прорисовка граней при построении 3D с использованием закраски по Гуро/Фонгу.

Посмотрите два топика:

Сейчас ищут техподдержку:  Разработанная в Подмосковье ИСОГД стала доступна для субъектов РФ

Есть ли пути эффективно и кросплатформенно смасштабировать канву со всеми внутренностями под размеры экрана?

Попробуйте использовать css. canvas { width: 100%; height: 100%; }. Как-то так. Но js-код должен учитывать этот кусок, т.к. сместятся координаты.

Большинство мобильных реализаций canvas – медленные

Давайте поговорим о мобильной платформе. К сожалению, на момент написания, только iOS 5.0 beta с Safari 5.1 использовала аппаратное ускорение canvas. Без него, мобильные браузеры просто не обладают достаточно мощным CPU для современных canvas-приложений.

Вопросы без ответов

Ребята, кто может дать ответы на эти вопросы — прошу в комменты

1. Как вывести текст на canvas в IE (IE8- excanvas.js)? Пробовал text.canvas.js с гуглокода — выводит ошибку про отсутствие нечто glyphs.Я не использую эмуляцию в IE

2. Существуют ли какие-то секретные библиотеки, умеющие рисовать линии переменной толщины. В случае с прямыми это относительно несложно реализовать «костыльным» способом, а вот всякие кривые Безье — видимо, только на низком пиксельном уровне.

3. Существуют ли какие-то секретные библиотеки, умеющие рисовать градиентную раскраску линий. Ну то есть чтобы цвет плавно менялся между узлами вдоль линии, не обязательно прямой. Такая функция есть, например, в OpenGL.

Группируйте вызовы


Так как отрисовка – дорогая операция, гораздо эффективнее загружать drawing state machine длинными списками команд, а потом выгружать их в видео буффер.

Например, при отрисовке множества линий, гораздо лучше сделать один путь со всеми линиями и нарисовать его в один вызов. Другими словами, чем рисовать отдельные линии:

for (var i = 0; i < points.length - 1; i  ) {
  var p1 = points[i];
  var p2 = points[i 1];
  context.beginPath();
  context.moveTo(p1.x, p1.y);
  context.lineTo(p2.x, p2.y);
  context.stroke();
}

Лучше нарисовать одну ломаную:

context.beginPath();
for (var i = 0; i < points.length - 1; i  ) {
  var p1 = points[i];
  var p2 = points[i 1];
  context.moveTo(p1.x, p1.y);
  context.lineTo(p2.x, p2.y);
}
context.stroke();

Это применимо также и к canvas. Рисуя сложный path, например, лучше сразу разместить на нем все точки, чем отрисовывать сегменты отдельно (jsperf): график.

Но имейте в виду, что с canvas есть важное исключение из этого правила: если у примитивов отрисовываемого объекта небольшие окружающие прямоугольники (bounding box) – может оказаться, что эффективнее рисовать их отдельно (jsperf): график.

Избегайте shadowblur

Как и другие графические среды, HTML5 canvas позволяет разработчикам размывать примитивы, но эта операция очень дорого обходится:

context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4;
context.shadowColor = 'rgba(255, 0, 0, 0.5)';
context.fillRect(20, 20, 150, 100);

Тест демонстрирует одну и ту же сцену, отрисованную с тенью и без тени и решительную разницу в производительности (jsperf): график.

Избегайте ненужных изменений состояния

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

Если вы используете несколько цветов заливки в сцене, дешевле рисовать по цвету, чем по расположению на холсте. Чтобы отрисовать текстуру в мелкую полоску вы можете нарисовать линию, сменить цвет, нарисовать следующую и так далее:

for (var i = 0; i < STRIPES; i  ) {
  context.fillStyle = (i % 2 ? COLOR1 : COLOR2);
  context.fillRect(i * GAP, 0, GAP, 480);
}

Или отрисовать все четные и нечетные полосы:

context.fillStyle = COLOR1;
for (var i = 0; i < STRIPES/2; i  ) {
  context.fillRect((i*2) * GAP, 0, GAP, 480);
}
context.fillStyle = COLOR2;
for (var i = 0; i < STRIPES/2; i  ) {
  context.fillRect((i*2 1) * GAP, 0, GAP, 480);
}

Сравнение эти способов представлено в следующем тесте (jsperf): график.

Как и предполагалось, первый вариант медленнее, так как манипуляции с состоянием дороги.

Избегайте нецелых координат

HTML5 canvas поддерживает суб-пиксельный рендеринг и нет никакой возможности его отключить. Если вы рисуете с нецелыми координатами, он автоматически использует анти-алиасинг, чтобы сгладить линии. Вот визуальный эффект суб-пиксельной производительности из

bunny

Если сглаженный спрайт – это не то, что вам нужно, намного быстрее будет переводить ваши координаты, используя Math.floor или Math.round (jsperf): график.

Чтобы перевести нецелые координаты в целые, есть несколько остроумных техник, большинство которых основываются на добавлении половины к числу и применении побитовых операций для удаления мантисы.

// With a bitwise or.
rounded = (0.5   somenum) | 0;
// A double bitwise not.
rounded = ~~ (0.5   somenum);
// Finally, a left bitwise shift.
rounded = (0.5   somenum) << 0;

Полный пробой производительности здесь (jsperf): график.

Этот способ оптимизации больше не будет иметь смысла с того момента, как реализации canvas станут GPU-ускорены, что позволит быстро отрисовывать нецелые координаты.

Интеграция canva в свой сайт

C помощью API

графический редактор можно интегрировать в ваш собственный онлайн-проект для создания пользовательского контента или оформления материалов, статей или личного кабинета. Сценариев применения встроенной версии Canva может быть много: типография, сервис для управления социальными сетями, образовательная платформа, инструменты маркетинга, конструктор сайтов, менеджер рекламных кампаний и т.д. Полнофункциональный графический редактор будет открываться поверх вашего сайта, а созданные дизайны можно будет сохранить в нужных полях. При этом пользователи сразу будут видеть шаблоны нужного размера и формата, который задан в конфигурации Кнопки Canva.

В настоящее время по всему миру кнопка интегрирована уже в сотни сервисов — как крупных, так и небольших. Из международных платформ можно назвать HubSpot, WattPad и FedEx. Среди российских сервисов, использующих кнопку — Amplifr и SMMPlanner.

Интерактивный контент

Вкладка «Ещё» включает различные приложения для интеграции популярных сервисов или вставки в дизайн интерактивного контента.

Вот несколько самых интересных приложений, которые могут пригодиться:

Интерфейс

Слева на экране расположены вкладки с ресурсами и инструментами для дизайна: Шаблоны, Фото, Элементы с рисунками, стикерами, фигурами и иконками, Текст с сочетаниями шрифтов, Видео с каталогом футажей, Музыка с саундтреками для роликов.

Также есть Папки для сортировки своих дизайнов и Загрузки — в эту вкладку можно перекинуть свои картинки или видеоролики для последующей вставки в макет. Canva поддерживает PNG, JPG, SVG и видео MP4 для загрузки. Хранить файлы в облаке удобно, если вы работаете с разных устройств — нужные материалы всегда будут под рукой.

Улучшаем производительность HTML5 canvas / Хабр

Отдельно стоит сказать о шрифтах: в списке доступно более 1500 вариантов и около 180 бесплатных шрифтов подойдут для русского языка. Рекомендуем использовать Canva с русским языком интерфейса — в этом случае кириллические шрифты всегда будут вверху списка, в поиске будут видны русскоязычные шаблоны, а во вкладке Текст — готовые сочетания шрифтов, упрощающие работу с типографикой. При наличии подписки Canva Pro в редактор можно загрузить собственный шрифт

Улучшаем производительность HTML5 canvas / Хабр

Во вкладке «Ещё» есть несколько дополнительных приложений. Например, вы можете подключить к Canva свой профиль в Инстаграме, Фейсбуке или Google Drive и использовать оттуда фотографии для создания новых дизайнов.

Улучшаем производительность HTML5 canvas / Хабр

Инструменты для редактирования появляются сверху при выделении элементов, они различаются в зависимости от типа объекта. Например, для фотографий это будут Эффекты, Фильтры, ручные настройки яркости, контраста и других параметров, обрезка и отражение; для текста — каталог шрифтов, кегль, цвет текста, выравнивание, создание списков, межбуквенный и межстрочный интервалы и т.д.

Используйте многослойные canvas для сложных сцен

Как говорилось ранее, отрисовка больших изображений обходится дорого и ее стоит избегать. В дополнение к использованию внеэкранного буффера (секция предварительной отрисовки), мы можем использовать холсты, наложенные друг на друга. Используя прозрачность верхнего слоя, мы можем положиться на GPU для применения альфа-канала во время отрисовки. Вы использовать это с двумя абсолютно позиционированными холстами друг на другом, как здесь:

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

Часто можно извлечь выгоду из ущербного человеческого восприятия и отрисовывать фон только один раз или реже, чем верхний слой (который как раз привлекает большую часть внимания пользователя). Например, вы можете N отрисовок верхнего слоя отрисовывать фон только 1 раз.

Этот способ также применим и к любому другому количеству слоев, если ваше приложение работает лучше с такой структурой.

Как пользоваться canva: популярные и неочевидные возможности | медиа нетологии: образовательная платформа

Команда Canva делится обзором популярных возможностей сервиса и напомнила, какими неочевидными функциями можно пользоваться для создания изображений.

Улучшаем производительность HTML5 canvas / Хабр Обучение в онлайн-университете: курс «Дизайн в digital для начинающих»

Начнем с самых популярных функций, а затем перейдем к менее очевидным возможностям.

Прежде всего, если вы вошли в Canva и всё на английском, — для удобства переключитесь на русский интерфейс.

Нажмите на свой профиль → Account Settings → Выберите русский язык в меню Language.

Чаще всего сервис используют, чтобы делать иллюстрации для соцсетей. В редакторе уже есть готовые шаблоны под все популярные соцсети, поэтому искать подходящие размеры и обрезать изображения не нужно. Достаточно найти макет и создать дизайн на его основе. Например, для Facebook можно сделать такую обложку:

Чтобы сделать такое изображение, наберите в строке поиска на главной «фон для Facebook» или найдите нужный формат в списке дизайнов. В новом окне откроются чистая страница, панель инструментов и макет. Кликните на макет и отредактируйте его: загрузите свою фотографию, наложите фильтр, напишите текст подходящим шрифтом.

Выбираем фон для Facebook в строке поиска

В Canva есть макеты для слайдов презентаций. Макеты разделены на рубрики: образовательные, маркетинговые, бизнес-презентации и так далее. Этот вид шаблонов один из самых популярных, его используют маркетологи, сотрудники и владельцы компаний, преподаватели и студенты.

Пример слайда презентации

Найдите шаблоны для презентаций через строку поиска — в новом окне откроется список макетов. В каждом — от 25 до 35 примеров слайдов в одном стиле, которые немного отличаются по структуре. На вкладке «Элементы-диаграммы» есть диаграммы и графики для слайдов, которым можно задавать нужные параметры.

Среди внутренних инструментов Canva чаще всего используют следующие.

Откройте вкладку «Текст» на левой панели → Напишите текст → Подгоните размер, растянув или сжав текстовую рамку → Выберите шрифт и цвет на верхней панели.

Сейчас ищут техподдержку:  Официальный сайт Сбербанка России

Кликните на объект, который хотите изменить → Нажмите на значок «Прозрачность» в верхнем правом углу → Настройте уровень прозрачности ползунком.

Кликните на объект, который хотите изменить → Нажмите на значок цвета на верхней панели → Нажмите « », чтобы создать свой цвет.

В редакторе можно найти шаблоны как для презентаций и постов в соцсети, так и под другие форматы.

Готовые бланки. На них можно сделать дипломы, благодарственные письма, сертификаты. В эту группу шаблонов входит также фирменный бланк для компаний — корпоративный документ с логотипом и адресом в верхней части. Найти нужный бланк можно в строке поиска, например, по запросу «Сертификат» или «Фирменный бланк».

Грамота на бланке Canva

Рекламные материалы для распечатки — флаеры, листовки, буклеты, визитки. Искать эти шаблоны также можно в поиске: напишите «Буклет» или «Листовка» и посмотрите все доступные размеры.

Шаблоны для новостной рассылки. Найдите «Новостную рассылку» в поиске и выберите шаблон с подходящей структурой. Его можно редактировать: менять цвета, шрифты, фон, вставлять свои фотографии или снимки с фотостока Canva (вкладка «Фото»).

Пример письма для новостной рассылки

Готовый дизайн можно интегрировать с сервисом рассылки MailChimp — для этого достаточно нажать стрелку «Опубликовать» в верхнем правом углу. Дизайн попадет в аккаунт MailChimp, откуда можно брать нужные фотографии или баннеры для письма. Подробная инструкция — в видео.

Если вы делаете письма в другом конструкторе, используйте Canva для создания иллюстраций, заголовков и баннеров для рассылки. Готовые шаблоны будут примерами

Лендинги. В конструкторе есть макеты лендингов с меню, активными ссылками и контентом, которые можно публиковать на своем сайте без работы с кодом.

Найдите «Сайт» в строке поиска, выберите шаблон и редактируйте его — меняйте фон, изображения, логотипы, текст и другие элементы. Результат можно опубликовать как макет в формате PDF, PNG, JPG или как адаптивный сайт. Доступны два способа публикации адаптивных сайтов:

Доступ к дизайну для нескольких пользователей. Можно открыть доступ на редактирование, как в Google.Документах, и работать над одним проектом вместе. Для этого нажмите на кнопку «Поделиться» над вашим дизайном и вставьте адрес электронной почты другого пользователя (или скопируйте ссылку для редактирования).

Синхронизация черновиков между сайтом и мобильным приложением. Если вы начали делать дизайн на компьютере, сможете продолжить с телефона — изменения в файле сохранятся. Черновики дизайнов синхронизируются автоматически.

Копирование настроек фотографий и цветов элементов с помощью быстрых сочетаний клавиш (alt=»Как пользоваться Canva: популярные и неочевидные возможности» ctrl C и alt=»Как пользоваться Canva: популярные и неочевидные возможности» ctrl V). Это позволит сохранить единый стиль среди нескольких дизайнов. Отредактируйте текст или изображение → Нажмите alt=»Как пользоваться Canva: популярные и неочевидные возможности» ctrl C → Выберите следующий элемент → Нажмите alt=»Как пользоваться Canva: популярные и неочевидные возможности» ctrl V → Настройки первого элемента скопируются на следующий.

Привязка аккаунта Canva к Facebook и Instagram с возможностью загружать фото прямо из соцсетей. Нажмите на вкладку «Еще» на панели слева → Выберите Instagram или Facebook → Введите данные, чтобы привязать страницы соцсетей.

Улучшаем производительность HTML5 canvas / Хабр Читать еще: «16 советов по созданию логотипа от экспертов по брендингу»


Как работать в canva

1. Регистрация. 

Командные функции

Бесплатная версия Canva позволяет создать команду, пригласив других пользователей по электронной почте.

Улучшаем производительность HTML5 canvas / Хабр

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

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

Чтобы поделиться доступом с человеком без создания команды, нажмите кнопку «Поделиться». Это удобно в тех случаях, когда вы не работаете вместе постоянно. Для доступа необязательно знать адрес почты, на который зарегистрирован аккаунт Canva — достаточно нажать «Копировать ссылку» под пунктом «Отправить ссылку для редактирования / просмотра» и отправить её человеку. Также можно дать персональный доступ, вписав адрес почты конкретного пользователя.

Минусы:

  • Нельзя рисовать.
  • Нет пипетки для определения цвета.
  • Мало инструментов для дизайна текста.
  • Ограничен функционал видеоредактора.
  • Максимальный размер документа — 100 страниц.
  • Нельзя загружать свою музыку.

Сервис регулярно обновляется, поэтому стоит следить за появлением новых опций — возможно, что многие из перечисленных ограничений и недоработок будут устранены уже в скором будущем. А пока можно осваивать те функции, которые уже доступны и стабильно работают. Приятного дизайна!

Не работают кнопки в canvas unity3d

У меня есть две сцены, одна только с GUI, другая сама игра. Нужно при нажатии на кнопку перейти в сцену игры. Если обе сцены активны, то отображается и GUI и игра.
Решил загрузить сцену с игрой, тогда GUI перестаёт работать — кнопки не нажимаются.

Почему при загрузке сцены с игрой кнопки в меню не работают?

Оптимизируйте анимации с помощью `requestanimationframe`

Относительно новая requestAnimationFrame API рекомендована для реализации интерактивных приложений в браузере. Вместо того, чтобы приказывать браузеру отрисовывать с конкретной частотой, вы вежливо просите его вызвать отрисовку и дать вам знать, когда он закончит. Как приятное дополнение, если страница неактивна, браузер достаточно умен, чтобы не рисовать.

Вызов requestAnimationFrame нацелен на 60 FPS, но не гарантирует его, так что вы должны следить, сколько времени прошло с последней отрисовки. Это может выглядеть так:

 var x = 100;
var y = 100;
var lastRender = new Date();
function render() {
  var delta = new Date() - lastRender;
  x  = delta;
  y  = delta;
  context.fillRect(x, y, W, H);
  requestAnimationFrame(render);
}
render();

Имейте в виду, что использование requestAnimationFrame применимо как к canvas, так и к другими техникам, как WebGL.

На время написания, API было доступно только для Chrome, Safari и Firefox, так что вам стоит пользоваться аккуратно.

Отрисовывайте только разницу, а не весь холст

Как можно предположить, чем меньшую часть экрана мы отрисовываем, тем это дешевле. Если у вас только незначительные различия между перерисовками, вы можете получить значительный рост производительности, отрисовывая только разницу. Другими словами, чем очищать весь экран перед отрисовкой:

context.fillRect(0, 0, canvas.width, canvas.height);

Следите за bounding box отрисовываемого и очищайте только ее.

context.fillRect(last.x, last.y, last.width, last.height);

Это показано в следующем тесте, который включает белую точку, пересекающую экран (jsperf): график.

Если вы разбираетесь в компьютерной графике, вам должна быть известна эта техника под названием “redraw regions”, в которой предыдущий bounding box сохраняется, а потом очищается при каждой отрисовке.

Эта техника применима и к попиксельной отрисовке, как в этом обсуждении JavaScript-эмулятора Nintendo.

Предварительно отрисовывайте в виртуальный canvas

Если вы отрисовывайте похожие примитивы на экран на протяжении многих кадров (как это часто бывает при написании игры), вы можете получить значительные выигрыши в производительности, отрисовывая крупные части вне сцены. Предварительная отрисовка подразумевает использование виртуального (или виртуальных) холстов, на которых отрисовываются временные изображения, а потом копирование виртуальных холстов на видимый. Для тех, кто знаком с компьютерной графикой, эта техника также известна, как

Например, представим, что вы перерисовываете Марио со скоростью 60 кадров в секунду. Вы можете отрисовывать его шляпу, усы и «M» в каждом кадре или предварительно отрисовать его перед запуском анимации.

без pre-rendering:

// canvas, context are defined
function render() {
  drawMario(context);
  requestAnimationFrame(render);
}

pre-rendering:

var m_canvas = document.createElement('canvas');
m_canvas.width = 64;
m_canvas.height = 64;
var m_context = m_canvas.getContext(‘2d’);
drawMario(m_context);

function render() {
  context.drawImage(m_canvas, 0, 0);
  requestAnimationFrame(render);
}

Обратите внимание на requestAnimationFrame, использование которой будет описано детальнее немного позднее. Следующий график демонстирует пользу использования pre-rendering (jsperf): график.

Эта техника особенно эффективна, когда отрисовка сложная (drawMario). Хороший пример – отрисовка текста, которая является очень дорогой операцией. Вот как драматически увеличивается производительность при использовании pre-rendering текста (jsperf): график

Как бы то ни было, вы можете наблюдать в примере выше низкую производительность теста “pre-rendered loose”. При предварительной отрисовке важно убедиться, что ваш временный холст имеет «обтягивающий» размер для вашего изображения, иначе выигрыш в производительности встретится с потерей производительности при копировании одного большого холста в другой (которая выглядит, как функция от размера холста-цели). Подходящий холст для примера выше – меньше:

can2.width = 100;
can2.height = 40;

В сравнении с большим:

can3.width = 300;
can3.height = 100;

Различные способы очистить экран


Так как canvas – парадигма

, сцена должна быть перерисована в каждом кадре. Из-за этого, очиста холста – операция фундаментальной важности в приложений и игр.

На время написания статьи, clearRect обгоняет width reset, но, в некоторых случаях, использование сброса ширины намного быстрее в Chrome 14 (jsperf): график.

Будьте осторожны с этим трюков, поскольку он сильно зависит от реализации canvas. Для дополнительной информации, см. статью Simon Sarris об очистке холста.

Редактирование шаблонов

Адаптация подходящего шаблона под свои нужды — беспроигрышный вариант для тех, кто не уверен в своих дизайнерских навыках. Библиотека Canva насчитывает десятки тысяч шаблонов, многие из них изначально доступны на русском языке, поэтому для них не придётся подбирать шрифты, совместимые с русским.

Для начала определитесь с выбором категории шаблонов. Категории для печатных макетов обычно имеют несколько страниц: например, шаблоны визиток, брошюр, флаеров, почтовых открыток и т.д. содержат по 2 страницы для двусторонней цветной печати. А шаблоны презентаций могут содержать до 20 слайдов в едином стиле с разными вариантами композиции.

Улучшаем производительность HTML5 canvas / Хабр

Вы можете изменить в шаблоне всё что угодно: цветовую гамму, фотографии, размер и расположение элементов и, конечно, исходные текстовые заглушки. Однако радикально менять шаблон не рекомендуем — изначально сбалансированный дизайн можно легко перегрузить лишними деталями или соединить в одном изображении несочетаемые друг с другом элементы.

В случае многостраничных шаблонов есть менеджер страниц, он расположен в меню «Вид»: можно отобразить превью всех страниц на одном экране («Вид сетки»), а можно в виде кадров на таймлайне («Просмотр истории»). Он позволяет увидеть последовательность всех слайдов на одном экране и, при необходимости, поменять их местами. Внутри редактора страницы также можно передвигать вверх или вниз по порядку, клонировать и удалять.

Сейчас ищут техподдержку:  Номера телефонов техподдержки мегафон

Редактор

Для всех объектов доступны следующие функции:

  • Расположение — автоматическая оцентровка по краям или центру дизайна, перемещение вперед или назад относительно других элементов.
  • Блокировка — отключение возможности сдвинуть или изменить элемент.
  • Группировка / разгруппировка: объединение нескольких объектов в один для удобного перемещения или изменения размера.
  • Копирование форматирования — быстрое перенесение настроек для текста, фотографии, палитры элементов и т.д.
  • Дублирование — создание копии элемента.
  • Прозрачность — любой элемент или фотографию можно сделать полупрозрачными.
  • Гиперссылка — на любой объект можно навесить внешнюю ссылку, которая будет работать в PDF-документах или онлайн-презентациях.

Ряд функций доступны также в контекстном меню по клику правой кнопки мыши:

  • Копировать
  • Вставить
  • Переместить вверх / вниз
  • Перенести на задний / передний план
  • Удалить
  • Установить изображение как фон.

Создание дизайна с нуля

Вы можете создать дизайн с нуля без использования готовых шаблонов. Для этого нужно поближе познакомиться с ресурсами библиотеки Canva.

Категории объектов, из которых можно составить дизайн, включают:

  • Сетки (различные комбинации расположения снимков для фотоколлажей).;
  • Фигуры (геометрические фигуры, облачка с текстом как в комиксах, простые символы, цвет которых можно менять).
  • Стикеры с анимацией.
  • Фигурные рамки, в которые можно вставить фотографию.
  • Диаграммы (графики, гистограммы и секторные диаграммы, которые можно строить по заданным числовым значением и менять цветовую палитру).
  • Градиенты (простые и затейливые фигуры с переливами из двух или трёх цветов, которые можно задать с помощью палитры).
  • Линии.
  • Рисунки и графика, собранные в тематические подборки: фигуры людей, растения, предметы интерьера и т.д.

Удобно искать рисунки через строку поиска. В pro-версии доступен поиск по цвету, по статичным и анимированным элементам.

Также вы можете нажать на «лайк», и элемент сохранится в папку «Понравившиеся». Таким образом, вам не придется искать его повторно. По подписке Canva Pro доступна расширенная сортировка элементов по папкам.

Создание изображений для соцсетей

Картинку для поста в социальных сетях можно сделать за несколько минут. Начнём с выбора формата: попробуем Анимацию для социальных сетей, чтобы привлечь внимание подписчиков. Она универсального размера 800 x 800 px, квадратный формат подойдёт для большинства соцсетей.

Выбираем шаблон, который станет основой нашего дизайна.

Улучшаем производительность HTML5 canvas / Хабр

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

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

Улучшаем производительность HTML5 canvas / Хабр

Исходную фотографию можно обработать с помощью Эффектов и Фильтров для придания ей нужного стиля. В этом примере мы используем Glitch и один из фильтров, создающих эффект ломографии.

Улучшаем производительность HTML5 canvas / Хабр

Далее работаем с расположением элементов в слоях. Видно, что новая фотография наложилась поверх одного из исходных элементов. Выделяем фото и используем панель Расположение, чтобы отодвинуть фото назад (вниз по слою). Теперь всё на своих местах.

Улучшаем производительность HTML5 canvas / Хабр

Теперь займёмся цветами. Цветовую гамму подсказывает фотография, поэтому поменяем все градиенты на те же сочетания цветов.

Улучшаем производительность HTML5 canvas / Хабр

Цвета круга с переливающейся анимацией изменить нельзя, поэтому его лучше просто удалить и заменить альтернативным элементом — находим такой в каталоге Стикеров, введя в поисковую строку запрос «градиент».

Тестирование производительности

В быстро меняющемся мире HTML5 canvas

Фирменный стиль и брендинг

Раздел

Фотобанк и лицензии

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

Canva решает эту проблему максимально эффективно. Каталог стоковой графики и фотографий внутри сервиса насчитывает более 60 миллионов изображений. Дизайнеры сервиса следят за качеством изображений — добавляют актуальные, стильные и аутентичные фотографии без излишней ретуши.

Улучшаем производительность HTML5 canvas / Хабр

Человек может использовать любые бесплатные изображения из Canva в личных и коммерческих целях. Источник указывать желательно, но не обязательно.

Премиум-элементы из библиотеки также можно использовать в любых целях в рамках подписки Canva Pro. Никакие дополнительные лицензии в этом случае не нужны.

Улучшаем производительность HTML5 canvas / Хабр

Если у вас нет подписки, вы можете купить премиум-элементы по лицензии:
— однократная лицензия, изображение можно использовать в одном дизайне;
— многоразовая лицензия, чтобы использовать фотографию в нескольких дизайнах или несколькими участниками команды;
— расширенная лицензия, подойдёт для крупных тиражей книг или другой полиграфии.

Фотоэффекты и удаление фона с фотографий

Вкладка Эффекты, появляющаяся при выделении фотографии в дизайне, содержит целый ряд классных фишек для обработки снимков: 

  • BadTV: эффект помех на экране
  • Slice: смещения фрагментов фотографии относительно других
  • Color Mix: инверсия цветов 
  • Pixelate: пикселизация фотографий
  • Glitch: цифровое искажение фотографии или эффект раздвоенной картинки
  • Liquify: эффект размытия и водных разводов
  • Screen: эффект «шума»
  • Duotone: превращение фото в стильное двухцветное изображение.

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

В Canva Pro также доступен эффект «Удаление фона». Работает он в двух режимах. Основной, Erase, позволяет автоматически удалить фон фотографии за несколько секунд, создавая прозрачный фон вокруг главного объекта съемки (в отличие от многих других подобных инструментов, здесь не нужно отмечать удаляемые части вручную). Дополнительный режим Remove работает в обратную сторону — он позволяет восстановить часть удалённого автоматически фона.

Улучшаем производительность HTML5 canvas / Хабр

Эта функция удобна для продвижения товаров: например, при создании рекламных баннеров, когда в центре дизайна должна стать продаваемая вещь, которую можно поместить на яркий фон и окружить другими декоративными элементами. Удаление фона пригодится и владельцам интернет-магазинов для оформления каталога — часто дизайн сайта предполагает фотографию товара на прозрачном фоне для единообразия интерфейса.

Функции презентаций

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

Опубликовать презентацию можно в режиме Автовоспроизведения, который подойдёт для выставок, конференций и других оффлайн-мероприятий: слайды будут автоматически переключаться с заданным временным интервалом.

Улучшаем производительность HTML5 canvas / Хабр

Есть и Режим докладчика: в этом случае появится «Окно аудитории», которое можно перекинуть на монитор, подключенный к проектору, или вывести в онлайн-трансляцию в режиме доступа к экрану. Докладчик сможет управлять слайдами, подглядывать в свои текстовые заметки и следить за часами, показывающими длительность презентации.

Улучшаем производительность HTML5 canvas / Хабр

Ещё одна функция, которая может пригодиться для конференций и корпоративных встреч — плейлист презентации. Сложив несколько презентаций разных пользователей в общую папку Canva, их все можно воспроизвести в нужном порядке и с автоматическим анонсом следующего спикера. Это поможет и ведущему, и самим докладчикам лучше ориентироваться в последовательности материалов и облегчит их восприятие.

Улучшаем производительность HTML5 canvas / Хабр

Наконец, несколько фишек — горячих клавиш — для презентаций в неформальной обстановке — они помогут привлечь внимание аудитории и вызовут улыбку, превратив презентацию в шоу:

  • Буква C для дождя из конфетти
  • Любая цифра — для таймера с обратным отсчётом (например, перед началом презентации или для ответа на вопросы викторины. Цифра будет соответствовать числу минут в таймере)
  • Буква S для шикающего смайлика с призывом к тишине
  • Буква B для размытия слайда
  • Буква D для барабанной дроби
  • Буква O для анимации с пузырями.

Javascript canvas: изображение не выводится

Подскажите, почему при таком коде:

<html>

<body>

<canvas id = 'c01' style = "width: 800; border: 1px solid black;"></canvas>

<script>
var canvas = document.getElementById("c01");

var ctx  = canvas.getContext("2d");

var image = new Image();
image.onload = function() {

    canvas.width = image.naturalWidth;
    canvas.height = image.naturalHeight;

    ctx.beginPath();

    ctx.drawImage(image, 0, 0);

    ctx.lineWidth = "6";
    ctx.strokeStyle = "red";
    ctx.rect(canvas.width / 4, canvas.height / 4, canvas.width / 2, canvas.height / 2);

    ctx.stroke();   
};

image.src = "https://icdn.lenta.ru/images/2021/03/31/13/20210331135912200/pic_5bfd003894e22bb0d70b775286b96a4f.jpg";

</script>

</body>

</html>

выводится изображение и поверх него прямоугольник — ВСЕ ок

А при таком:

<script>
var canvas = document.getElementById("c01");

var ctx  = canvas.getContext("2d");

var image = new Image();
image.onload = function() {

    canvas.width = image.naturalWidth;
    canvas.height = image.naturalHeight;
};

image.src = "https://icdn.lenta.ru/images/2021/03/31/13/20210331135912200/pic_5bfd003894e22bb0d70b775286b96a4f.jpg";

ctx.beginPath();

ctx.drawImage(image, 0, 0);

ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.rect(canvas.width / 4, canvas.height / 4, canvas.width / 2, canvas.height / 2);

ctx.stroke();   

</script>

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

это связано с тем, что изображение ещё не успевает загрузиться (асинхронный image.src)?

и как корректно все делать?

если несколько изображений, то вряд ли onload придется несколько делать

Заключение

Canva — универсальный инструмент для максимально широкой аудитории, и в этом заключаются его достоинства и недостатки. Его возможностей по созданию изображений в любом стиле и для огромного числа шаблонов хватит большинству тех людей, у кого в принципе возникает потребность в том, чтобы создать изображения или короткий ролик самостоятельно. Это могут быть дизайны для маркетинга, бизнеса, повседневных операционных задач, печатных материалов и образования. Его удобно использовать в команде: конструктор позволяет сэкономить не только время, но и деньги — например, на приобретение стоковых фотографий. 

Функции сервиса развиваются постоянно и в разных направлениях: добавляются новые фишки по упрощению дизайна, новые эффекты для работы с текстом и изображениями, новые шаблоны и инструменты работы с видео.

Улучшаем производительность HTML5 canvas / Хабр

В то же время, Canva не закрывает все потребности по работе с графикой, которые могут появиться у компании. Профессиональные дизайнеры и фотографы продолжают пользоваться продуктами Adobe для сложных графических идей и ретуши фотографий. Дизайнеры интерфейса и профессионалы веб-дизайна используют Figma для прототипов, составления схем и продвинутого взаимодействия внутри одного сложного макета; для создания длинных видеороликов и монтажа придётся обращаться к специальным видеоредакторам. 

Выделим основные преимущества и недостатки редактора.

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...

Оставьте комментарий

Adblock
detector