В этом руководстве вы узнаете, как использовать метод JavaScript fillText() для рисования и вывода текстовой строки на холсте.
fillText() — это метод контекста 2D-рисования. Метод fillText() позволяет рисовать текстовую строку в координатах с заливкой, полученной из текущего fillStyle.
Синтаксис:
ctx.fillText(text, y , y [, maxWidth])
fillText() принимает следующие параметры:
text— текстовая строка для рисования.xиy— это координаты по осям x и y точки, в которой метод начинает рисовать текст.maxWidth— это максимальное количество пикселей в ширину, в котором метод будет отображать текст. По умолчанию ширина текста не будет иметь ограничений, если вы не укажете аргументmaxWidth. Однако, если вы передадите значениеmaxWith, метод попытается настроить кернинг или выбрать более сжатый шрифт для текста, чтобы он соответствовал указанной ширине.
Пример
Давайте рассмотрим несколько примеров использования метода fillText() в JavaScript.
1) Пример заполненного текста
В этом примере рисуются слова "Hello, Canvas!" на холсте с помощью fillText().
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript fillText Demo</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <canvas id="canvas" height="400" width="500"> </canvas> <script src="js/app.js"></script> </body> </html>
JavaScript
Ниже показан код JavaScript, рисующий текст:
const canvas = document.getElementById('canvas');
if (canvas.getContext) {
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.font = '60px san-serif';
ctx.fillText('Hello, Canvas!', 100, 200);
}Выход:
Как это работает:
- Сначала выберите элемент холста с помощью метода
querySelector(). - Во-вторых, получите ссылку на контекст 2D-графики холста.
- В-третьих, установите шрифт без засечек высотой 60 пикселей. и стиль заливки зеленый.
- Наконец, нарисуйте текст
'Hello, Canvas!'начиная с координат(100,200).
2) Ограничение размера текста
В следующем примере рисуются слова 'Hello, Canvas!' с максимальным размером 250px.
HTML
<canvas id="canvas" height="400" width="500"> </canvas>
JavaScript
const canvas = document.getElementById('canvas');
if (canvas.getContext) {
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.font = '60px san-serif';
ctx.fillText('Hello, Canvas!', 100, 200, 250);
}Выход:
Выравнивание текста
Чтобы выровнять текст на холсте, используйте свойство textAlign :
ctx.textAlign = value;
Выравнивание относительно x метода fillText().
value может быть одним из следующих значений:
'left'– текст выравнивается по левому краю.'right'– текст выровнен по правому краю.'center'– текст выравнивается по центру.'start'– текст выравнивается по началу строки. Он выравнивается по левому краю в локалях с письмом слева направо и выравнивается по правому краю в локалях с письмом справа налево.'end'– текст выравнивается по концу строки. Он выравнивается по правому краю для локалей с письмом слева направо и по левому краю для локалей с письмом справа налево.
Значение по умолчанию для texAlign — start.
В следующем примере демонстрируются различные параметры свойства textAlign :
HTML
<canvas id="canvas" height="350" width="500"> </canvas>
JavaScript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const x = canvas.width / 2;
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();
ctx.font = '25px san-serif';
ctx.textAlign = 'left';
ctx.fillText('left-aligned', x, 40);
ctx.textAlign = 'center';
ctx.fillText('center-aligned', x, 85);
ctx.textAlign = 'right';
ctx.fillText('right-aligned', x, 130);
// LTR locale
canvas.setAttribute('dir', 'ltr');
ctx.textAlign = 'start';
ctx.fillText('start', x, 175);
ctx.textAlign = 'end';
ctx.fillText('end', x, 220);
// RTL locale
canvas.setAttribute('dir', 'rtl');
ctx.textAlign = 'start';
ctx.fillText('start', x, 265);
ctx.textAlign = 'end';
ctx.fillText('end', x, 305);Чтобы изменить локаль на LTR или RTL, вы устанавливаете значение атрибута dir холста на 'ltr' и 'rtl'.
Вот результат:
Базовый текст
Чтобы указать базовую линию текста для текста чертежа, вы используете свойство textBaseline контекста 2D-рисования:
ctx.textBaseline = value;
Значение textBaseline может быть одним из следующих значений:
'top'– базовая линия текста является верхним краем квадрата em.'hanging'– базовая линия текста является базовой линией висящего текста.'middle'– базовой линией текста является середина квадрата em.'alphabetic'– текстовая базовая линия является алфавитной базовой линией. Это значение по умолчанию.'ideographic'– базовая линия текста является идеографической. Он в основном используется китайскими, японскими и корейскими сценариями.'bottom'– базовая линия текста находится внизу ограничивающей рамки.
Пример базовой линии текста
В следующем примере показаны различные значения textBaseline.
HTML
<canvas id="canvas" width="550" height="500"></canvas>
JavaScript
const canvas = document.getElementById('canvas');
if (canvas.getContext) {
const ctx = canvas.getContext('2d');
const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'];
const str = 'The quick brown fox jumps over the lazy dog';
ctx.font = '20px san-serif';
ctx.strokeStyle = 'red';
baselines.forEach((baseline, index) = > {
// set the text baseline
ctx.textBaseline = baseline;
const y = 75 + index * 75;
// draw a line
ctx.beginPath();
ctx.moveTo(0, y + 0.5);
ctx.lineTo(500, y + 0.5);
ctx.stroke();
// draw the text
ctx.fillText(`$ {
str
} ($ {
baseline
})`, 0, y);
});
}Выход:
Заключение
- Используйте JavaScript
fillText()для рисования текстовой строки с координатами на холсте. - Используйте свойство
font,textAlignиtextBaselineдля установки параметров рисования текста.