slogin.info

ihc 468x60 1 1
Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна0 / 5
 
Автор: Администратор
Просмотров: 1703
Теги: font, canvas, fillText, strokeText, textAlign, textaseline

Разберемся со способами рисования текста на холсте canvas.

Существует два метода, позволяющие рисовать текст - один отвечает за закрашенный текст, другой только за его очертания (как и с прямоугольниками). Рассмотрим оба из них.

fillText(text, x, y [, maxWidth])

Вставляет закрашенный текст, указанный в параметре text, начиная с правого нижнего угла в координатах (x,y), так же можно указать максимальную ширину.

strokeText(text, x, y [, maxWidth])

Вставляет контуры текста, указанного в параметре text, начиная с правого нижнего угла в координатах (x,y), так же можно указать максимальную ширину.

Рассмотрим пример использования этих функции (увеличим текст, чтобы было понятнее, далее рассмотрим, как это можно сделать):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta name="viewport" content="width=device-width" />
<script src="/js/script.js" type="text/javascript"></script>
<title>Страница</title>
</head>
<body onLoad="Draw()">
	<CANVAS id="id_canvas" height="400" width="600"></CANVAS>
</body>
</html>
function Draw() {
	var canvas = document.getElementById("id_canvas");
	var context = canvas.getContext("2d");	// Получаем так называемый контекст холста, к которому уже можем применять функции отрисовки.
	context.font = "48px serif";
	context.fillText("Hello, WebCofp", 10, 100);
	context.strokeText("Hello, WebCofp", 10, 300);
}

Просмотреть результат можно на демо-странице:

demo

Изменение стиля текста

Мы уже использовали одно из свойств для изменения стиля текста - font, кроме него так же есть и другие, позволяющие изменить внешний вид рисуемого текста в canvas.

font = value

Это основной стиль, который будет использоваться для отображения текст, значение задается таким же образом, как и для CSS свойства font.

textAlign = value

Выравнивание текста по горизонтали, может принимать следующие значения:  startendleftright или center. По умолчанию равно start.

textBaseline = value

Выравнивание текста по вертикали, может принимать следующие значения: tophangingmiddle, alphabeticideographicbottom. По умолчанию равно alphabetic.

На изображении ниже, показаны отличия этих значений:

textBaseline

direction = value

Указывает направление текста, может принимать значения: ltrrtlinherit. По умолчанию равно inherit.

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta name="viewport" content="width=device-width" />
<script src="/js/script.js" type="text/javascript"></script>
<title>Страница</title>
</head>
<body onLoad="Draw()">
	<CANVAS id="id_canvas" height="400" width="600"></CANVAS>
</body>
</html>
function Draw() {
	var canvas = document.getElementById("id_canvas");
	var context = canvas.getContext("2d");	// Получаем так называемый контекст холста, к которому уже можем применять функции отрисовки.

	context.font = "32px serif";
	context.fillText("WebCofp left", 120, 50);
	context.textAlign = "center";
	context.strokeText("WebCofp center", 120, 100);

	context.textAlign = "start";
	context.textBaseline = "top";
	context.fillText("WebCofp top", 20, 150);
	context.textBaseline = "bottom"
	context.fillText("WebCofp bottom", 200, 150);
}

Результаты на демо-странице:

demo

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • ZOMRO
    7.80
  • intuit89
    6.20
  • Varvarka
    4.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Как подключать свои шрифты на сайт, или все о @font-face в CSS

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

Теги:

css, css3, @font-face, font, шрифт

Комментариев: 0 Подробнее
Тег canvas - как начать рисовать?

В этой статье мы изучим базовые возможности тега <canvas>, чтобы у вас сложилось впечатление, что это вообще такое и как это можно использовать.

Теги:

javascript, html5, canvas, гайд, основы

Комментариев: 0 Подробнее
Тег canvas - рисуем линии moveTo и lineTo.

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

Теги:

html5, canvas, lineTo, moveTo, рисуем

Комментариев: 0 Подробнее
Canvas - реализация ластика (Eraser)

Рассмотрим возможность использования ластика на холсте Canvas.

Теги:

canvas, eraser, ластик, globalCompositeOperation

Комментариев: 0 Подробнее

Последнее с форума

ZOMRO аватар
А Вы знали, что на нашем сайте есть блог, где собраны статьи с интересной и, главное, полезной инфор...
Перейти в тему
ZOMRO аватар
Друзья, на нашем сайте доступен сервис, который предназначен для того, чтобы Вы могли проверить “вид...
Перейти в тему
ZOMRO аватар
Бесплатный тестовый период виртуального хостинга на 10 дней Мы гарантируем высокую стабильность и п...
Перейти в тему

Последние статьи

Javascript функции

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

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.