fillText()¶
Метод fillText()
рисует на холсте текст с заливкой. По умолчанию цвет заливки черный.
Чтобы определить тип и размер шрифта, используется свойство font
. Чтобы установить другой цвет/градиент заливки, используется свойство fillStyle
.
Синтаксис¶
context.fillText(text, x, y, maxWidth);
Параметры¶
text
- Определяет строку текста, которая будет написана на холсте
x
- Координата X начала вывода текста (относительно холста)
y
- Координата Y начала вывода текста (относительно холста)
maxWidth
- Необязательный параметр. Максимально разрешенная ширина текста в пикселях
Спецификация¶
Пример¶
Напишем "Hello world!" и "Big smile!" (с градиентом) используя fillText():
JavaScript:
var c = document.getElementById('myCanvas')
var ctx = c.getContext('2d')
ctx.font = '20px Georgia'
ctx.fillText('Hello World!', 10, 50)
ctx.font = '30px Verdana'
// Создаем градиент
var gradient = ctx.createLinearGradient(0, 0, c.width, 0)
gradient.addColorStop('0', 'magenta')
gradient.addColorStop('0.5', 'blue')
gradient.addColorStop('1.0', 'red')
// Заполняем текст градиентом
ctx.fillStyle = gradient
ctx.fillText('Big smile!', 10, 90)
Ссылки¶
- Метод
fillText()
MDN (рус.)