CanvasText версия 0.2

Простой способ вывести стилизованный текст в элемент HTML5 canvas.

Что такое CanvasText?

Если вы пользовались элементом HTML5 Canvas, то наверняка знаете, как сложно выести в нем стилизованный текст.

CanvasText - это библиотека JavasScript, которая делает вывод стилизованного текста в элемент canvas простым и похожим по синтаксису на HTML и CSS.

Текущая версия 0.2 также включает систему кэширования, которая которая существенно уменьшает время выполнения операций.

Простое сравнение

Сначала просто сравним конечный результат с использованием библиотеки и без нее:

С использованием CanvasText

var CanvasText = new CanvasText;

CanvasText.config({
    canvasId: "canvas",
    fontFamily: "Verdana",
    fontSize: "14px",
    fontWeight: "normal",
    fontColor: "#000",
    lineHeight: "12"
});

CanvasText.defineClass("blue",{
    fontSize: "24px",
    fontColor: "#29a1f1",
    fontFamily: "Impact",
    fontWeight: "normal"
});

CanvasText.defineClass("pink",{
    fontSize: "24px",
    fontColor: "#ff5e99",
    fontFamily: "Times new roman",
    fontWeight: "bold"
});

var text = 'Мне нравится <class="blue">синий</class> цвет, также как и <class="розовый">pink</class>!';
text += '<br />Тем не менее, лучше использовать <class="blue">синий</class>, а не <class="розовый">pink</class>... ;)!';

CanvasText.drawText({
    text:text,
    x: 20,
    y: 30
});

Преимущества:

  • Короткий и понятный код.
  • Легко поддерживать.
  • Похоже на синтаксис HTML и CSS.
  • Можно использовать кэш.
  • Абзац текста в одну строку.
  • Поддержка классов.
  • Поддержка встроенных стилей.

БЕЗ CanvasText

var canvas  = document.getElementById("canvas");
var context = canvas.getContext('2d');
var Red = "#ff5e99";
var Blue = "#29a1f1";
var Black = "#000";
var x = 10;
var y = 40;
var txt_p1 = "Мне нравится ";
var txt_p2 = "синий";
var txt_p3 = " цвет, также как и ";
var txt_p4 = "розовый";
var txt_p5 = "!";
var txt_p6 = "Тем не менее, лучше использовать";
var txt_p7 = ", а не ";
var txt_p8 = "... ;)!";

context.font = '14px Verdana';
context.fillStyle = "#000000";
context.fillText(txt_p1,x,y);
x += context.measureText(txt_p1).width;

context.save();
context.font = 'normal 24px Impact';
context.fillStyle = Blue;
context.fillText(txt_p2,x,y);
x += context.measureText(txt_p2).width;
context.restore();

context.fillText(txt_p3,x,y);
x += context.measureText(txt_p3).width;

context.save();
context.font = 'bold 24px Times New Roman';
context.fillStyle = Red;
context.fillText(txt_p4,x,y);
x += context.measureText(txt_p4).width;
context.restore();

context.fillText(txt_p5,x,y);
x += context.measureText(txt_p5).width;

y+= 24;
x = 10;

context.fillText(txt_p6,x,y);
x += context.measureText(txt_p6).width;

context.save();
context.font = 'normal 24px Impact';
context.fillStyle = Blue;
context.fillText(txt_p2,x,y);
x += context.measureText(txt_p2).width;
context.restore();

context.fillText(txt_p7,x,y);
x += context.measureText(txt_p7).width;

context.save();
context.font = 'bold 24px Times New Roman';
context.fillStyle = Red;
context.fillText(txt_p4,x,y);
x += context.measureText(txt_p4).width;
context.restore();

context.fillText(txt_p8,x,y);

Недостатки:

  • Объем кода растет по экспоненте.
  • Сложность кода растет по экспоненте.
  • Нет кэширования.
  • Абзац разделен.
  • Повтор кода.
  • Объявления множества переменных.
  • Сложно поддерживать и модифицировать.

Описание

Примечание: Файл с исходниками содержит примеры использования.

Содержание

1. Установка

Прежде всего нужно скачать файл CanvasText.js

Затем необходимо включить файл CanvasText.js до закрывающего тега </head>.

<script src="путь/до/файла/CanvasText.js"></script>

2. Запускаем!

Создаем новый экземпляр класса CanvasText и сохраняем его в переменной.

Данное действие можно делать где угодно: внутри объекта, внутри функции...

CanvasText = new CanvasText;

2.1. Устанвливаем основную конфигурацию

Важно: Выполняйте данную операцию после полной загрузки страницы (window.onload).

Для устновки стиля по умолчанию нужно использовать метод CanvasText.config(). Обязательно нужно передать методу объект со свойством "canvasId".

CanvasText.config({
    canvasId: "canvas",
    fontFamily: "Verdana",
    fontSize: "14px",
    fontWeight: "normal",
    fontColor: "#000",
    lineHeight: "12"
});

Доступные парметры для версии 0.2:

2.2. Пишем текст: встроенные стили

Теперь выведем текст!

Использование встроенных стилей является самым быстрым способом вывести текст, но не самым правильным.

Метод CanvasText.drawText() отвечает за вывод текста.

Ему нужно передать объект со свойствами "text", "x" и "y".

Использование: <style="стили">Текст</style>.

Синтаксис задания стилей полностью соответствует CSS.

var text = 'Мне нравится <style="font-weight:bold;color:#00F">синий</style> цвет, также как и <style="font-weight:bold;color:#F00">розовый</style>...<br />Тем не менее, лучше использовать <style="font-weight:bold;color:#00F">синий</style>, а не <style="font-weight:bold;color:#F00">розовый</style>!';

CanvasText.drawText({
    text:text,
    x: 20,
    y: 30
});

2.2.1. Доступные свойства для встроенных стилей

В версии 0.2 можно использовать следующие свойства:

2.2.2. Создание классов

Чтобы не писать одинаковые свойства стилей снова и снова, нужно исопльзовать классы.

Для создания нового класса нужно вызвать метод "CanvasText.defineClass".

И передать ему два значения: строку с именем класса и объект со свойствами класса.

Использование: <class="имя_класса">Текст</class>. Пример:

CanvasText.defineClass("blue",{
    fontSize: "16px",
    fontColor: "#00F",
    fontFamily: "Georgia",
    fontWeight: "bold"
});

var text = 'Мне нравится <class="blue">синий</class> цвет!';

CanvasText.drawText({
    text:text,
    x: 20,
    y: 30
});

2.2.3. Доступные свойства классов

В версии 0.2 доступны следующие свойства классов:

2.2.4. Вставка новой строки

Вы можете использовать тег "<br />" в тексте для вставки новой строки.

3. Система кэширования

Если ваше приложение выовдит текст много раз в секунду, то кэширование предназначено для вас :)!

Разница во времени выполнения между кэшированным вариантом и обычным - огромная.

Проверка выполнялась н аэлементе canvas с размерами 5000x5000 заполненном текстом.

Результаты говорят сами за себя:

Для кэширования текста нужно добавить свойство "cacheId" при вызове метода drawText:

CanvasText.drawText({
    text:text,
    x: 350,
    y: 30,
    cacheId: "something"
});