Главная RSS Онлайн игры WarCraft Приколы Карта сайта О блоге Поиск Добавить пост Ваши посты
500 рублей помощь регистрации домена и на хосте и перенос сайта туда связь


+ Подписаться

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

Скачать


Работа с текстом

0

Добавил: AlexMaster

Дата: 15.09.2016


Работа с текстом - в canvas для работы с текстом существуют две функции fillText и strokeText.

Они принимают три обязательных параметра сам текст и координаты по x и y. Есть еще четвертый, не обязательный параметр - максимальная ширина текста в пикселях. Если, задать этот параметр, то слишком длинное предложение сожмется, для того чтобы уместится в заданную ширину. Лучше не использовать последний параметр, так как при сжатии, текст может стать нечитабельным. Вместо такого сжатия лучше перенести текст на новую строку. Специальной функции для этого нет, но в листинге 1 показано как это реализовать. Если просто вывести текст с помощью функции fillText и strokeText, то такой текст будет черного цвета, мелкий и плохо виден. Для установки шрифта существует специальная переменная font. Чтобы изменить цвет текста используйте переменную fillStyle.
В листинге 1 показан пример, где создается три строки. В коде присутствует свойство lineWidth. Это свойство устанавливает толщину линии текста, Сам текст создается с помощью функцией strokeText:
Пример листинг 1.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Text</title>
<script type="text/javascript">
function main()
{
var canvas = document.getElementById("text");
ctx = canvas.getContext("2d");
ctx.font = "italic 24px Verdana";
ctx.fillStyle = "black";
ctx.fillText("Fill Text", 50, 50);
ctx.font = "bold 40px Verdana,sans-serif";
ctx.lineWidth = 2;
ctx.strokeStyle = "red";
ctx.strokeText("Stroke Text", 20, 100);


ctx.fillStyle = "yellow";
ctx.font = "bold 32px Verdana,sans-serif";
ctx.fillText("Stroke Text", 50, 200);
ctx.lineWidth = 2;
ctx.strokeStyle = "green";
ctx.strokeText("Stroke Text", 50, 200);
}
</script>
</head>
<body onload="main()">
<canvas id="text" width=300 height=200></canvas>
</body>
</html>

Расположение текста.


Есть два способа позиционирования текста, относительно своего расположения - вертикальное и горизонтальное. Вертикальное позиционирование текста задается при помощи textBaseline. Он принимает один из возможных вариантов: top, hanging, middle, alphabetic, ideographic и bottom.
top – выравнивание относительно верхней точки базовой линии.
middle – выравнивание относительно середины базовой линии.
bottom – выравнивание относительно нижнего края базовой линии.
alphabetic (по умолчанию) – выравнивание относительно линии alphabetic.
Hanging – выравнивание относительно линии hanging.
ideographic – выравнивание относительно линии ideographic
Пример (я не стал писать весь код, просто вставьте этот код в функцию main предыдущего примера после ctx = canvas.getContext("2d");):
Пример листинг 2.

ctx.beginPath();
ctx.moveTo(10,75);
ctx.lineTo(370,75);
ctx.stroke();
ctx.font = "18px Verdana";
ctx.textBaseline="top";
ctx.fillText("Top",15,75);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",60,75);
ctx.textBaseline="middle";
ctx.fillText("Middle",140,75);
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",200,75);
ctx.textBaseline="bottom";
ctx.fillText("Bottom",300,75);

Горизонтальное позиционирование текста при помощи textAlign. Принимает один из следующих параметров. center, start, end, left, right.
start – выравнивание от начала строки.
end – выравнивание от окончания строки
left – выравнивание по левому краю
center – выравнивание по центру.
right – выравнивание по правому краю
Пример листинг 3.

ctx.beginPath();
ctx.moveTo(150, 10);
ctx.lineTo(150, 290);
ctx.stroke();
ctx.font = "22px Verdana";
ctx.textAlign = "right";
ctx.fillText("Right Text", 150, 30,100);
ctx.textAlign = "left";
ctx.fillText("Left Text", 150, 60);
ctx.textAlign = "center";
ctx.fillText("Center Text", 150, 90);
ctx.textAlign = "start";
ctx.fillText("Start Text", 150, 120);
ctx.textAlign = "end";
ctx.fillText("End Text", 150, 150);

Определение ширины текста.


С помощью функции measureText() можно определить ширину текста на canvase. Например:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Text</title>
<script type="text/javascript">
function main()
{
var canvas = document.getElementById("text");
ctx = canvas.getContext("2d");
var text = "Текст размещен справа в верху.";
ctx.font = "24px Verdana";
ctx.lineWidth = 1;
var marginLeft = canvas.width - ctx.measureText(text).width;
ctx.strokeStyle="#fff";
ctx.strokeText(text, marginLeft, 20);
}
</script>
</head>
<body onload="main()">
<canvas id="text" width=500 height=200 style="background:#000"></canvas>
</body>
</html>

Скачайте файл с исходниками.

Назад

Просмотров: 130

Кометарий добавил(a):MaksBaw
Дата: 2017-10-14 01:01:49

Всем добра! Открываю секрет, что есть возможность урвать 5к рублей, при этом не потратив ни копейки. Для этого нужно всего лишь вступить в смешной паблик вконтакте https://vk.com/Vash_Pozitiv и сделать репост первой записи. К тому же можно улучшить своё настроение, ведь в нём стабильно опубликовываются лучшие позитивки ;)

1

Комментарий к этой заметки:

Добавить ваш камментарий:

Введите капчу

 

Яндекс.Метрика