Нарисовать Текст в canvas

Сделаем текст в canvas. Несколько примеров текстов в canvas, сделаем цветной текст в canvas.

О тексте в canvas.

1. Текст в canvas.
Скачать пример текст - canvas Пример canvas Текст(на отдельной странице)

2. Текст в canvas с заливкой.
Скачать пример текст - canvas Пример canvas Текст(на отдельной странице)

3. Покрасим Текст в canvas
Скачать Текст canvas с цветной заливкой. Пример canvas Текст(на отдельной странице)

Текст в canvas.

В первой м пункте сделаем просто текст в canvas по умолчанию... для этого вам понадобится:

Как обычно берем html код для canvas:

<canvas id="myCanvas" width="300" height="100">Ваш браузер не поддерживает canvas</canvas>

Используем getElementById, чтобы оперировать с "canvas html".

var canvas = document.getElementById("myCanvas");

Если ваш браузер не поддерживает "canvas" выводим:

Ваш браузер не поддерживает canvas

Метод HTMLCanvasElement.getContext() возвращает контекст рисования на холсте, или null, если идентификатор контекста не определён.

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

Свойство font устанавливает или возвращает свойства шрифта для текстового содержимого на холсте. Поставим высоту шрифта 20px и стиль - serif^

ctx.font = "20px serif";

Метод fillText() рисует на холсте текст с заливкой. По умолчанию цвет заливки черный. Наш текст в внутри canvas будет "Привет текст в canvas":

ctx.fillText("Привет текст в canvas", 10, 50);

Соберем весь Текста в canvas:

Текст в canvas.

Пример canvas Текст(на отдельной странице)


Вот живой пример вставлено с помощью iframe :




Текст в canvas с заливкой.

Рассмотрим ещё один вариант создания текста в canvas - для этого вма понадобится:

Возьмем теорию и пример canvas с текстом из предыдущего пункта и чуть его изменим! Заменим :

fillText

На:

strokeText

Метод strokeText() рисует (без заливки) на холсте текст. По умолчанию цвет текста черный.

ctx.strokeText("Привет текст в canvas", 10, 50);

Пример : Текст в canvas.

Создадим отельный пример на отдельной странице... и разместим код Текста туда или см здесь далее..

Вот живой пример вставлено с помощью iframe :




Покрасим Текст в canvas

Далее - давайте сделаем текст в canvas и покрасим данный текст в какой-то цвет - для данной операции вам понадобится:

Вся теория и пример из первого пункта! Немного её изменим, вернее добавим всего одну строчку:

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

Цвет выбираем красный - red.

ctx.fillStyle = "red";

Соберем весь код:

Пример : Текст в canvas с цветом.

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

Вот живой пример вставлено с помощью iframe :