Рисование текста

Последнее обновление: 05.11.2023

Наряду с геометрическими фигурами и изображениями canvas позволяет выводить текст. Доля этого вначале надо установить у контекста canvas свойство font:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.font = "22px Verdana";

Свойство font в качестве значения принимает определение шрифта. В данном случае это шрифт Verdana высотой 22 пикселя. В качестве шрифтов используются стандартные шрифты.

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

  • fillText(text, x, y): принимает три параметра: выводимый текст (параметр texte) и координаты точки, с которой выводится текст (параметры x и y).

  • strokeText(text, x, y): принимает аналогичные параметры.

Разница между двумя метода состоит в том, что fillText() использует цвет заполнения фигуры (из свойства fillStyle) и заполняет им символы текста. Метод strokeText() использует цвет контура фигуры (задается через свойство strokeStyle) и отрисосывает контур символов.

Например, выведем некоторый текст с помощью метода fillText():

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
<canvas id="canvas" width="400" height="250"></canvas>
<script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.font = "30px Verdana";
context.fillStyle = "navy";     // устанавливаем цвет текста
context.fillText("Hello METANIT.COM", 20, 50);
</script>
</body>
</html>
Вывод текста на canvas с помощью метода fillText в JavaScript

Метод fillText(text, x, y) принимает три параметра: выводимый текст и x и y координаты точки, с которой выводится текст.

Вывод аналогичного текста с помощью метода strokeText():

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.font = "30px Verdana";
context.strokeStyle = "navy";     // устанавливаем цвет текста
context.strokeText("Hello METANIT.COM", 20, 50);
Вывод текста на canvas с помощью метода strokeText в JavaScript

Свойство textAlign

Свойство textAlign позволяет выровнить текст относительно одной из сторон. Это свойство может принимать следующие значения:

  • left: текст начинается с указанной позиции

  • right: текст завершается до указанной позиции

  • center: текст располагается по центру относительно указанной позиции

  • start: значение по умолчанию, текст начинается с указанной позиции

  • end: текст завершается до указанной позиции

var canvas = document.getElementById("myCanvas"), 
	context = canvas.getContext("2d");
context.font = "22px Verdana";
context.textAlign = "right";
context.fillText("Right Text", 120, 30);
context.textAlign = "left";
context.fillText("Left Text", 120, 60);
context.textAlign = "center";
context.fillText("Center Text", 120, 90);
context.textAlign = "start";
context.fillText("Start Text", 120, 120);
context.textAlign = "end";
context.fillText("End Text", 120, 150);
textAlign в canvas в JavaScript

Свойство textBaseline

Свойство textBaseline задает выравнивание текста по базовой линии. Оно может принимать следующие значения:

  • top

  • middle

  • bottom

  • alphabetic

  • hanging

  • ideographic

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.font = "22px Verdana";
context.textBaseline="top";
context.fillText("Top",10,100);
context.textBaseline="bottom";
context.fillText("Bottom",45,100);
context.textBaseline="middle";
context.fillText("Middle",130,100);
context.textBaseline="alphabetic";
context.fillText("Alphabetic",205,100);
context.textBaseline="hanging";
context.fillText("Hanging",320,100);
textBaseline в canvas в JavaScript

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

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

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.font = "18px Verdana";
const text = context.measureText("Hello JavaScript");
console.log(text.width);

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850