Перейти к содержанию

fillText()

Метод fillText() рисует на холсте текст с заливкой. По умолчанию цвет заливки черный.

Чтобы определить тип и размер шрифта, используется свойство font. Чтобы установить другой цвет/градиент заливки, используется свойство fillStyle.

Синтаксис

context.fillText(text, x, y, maxWidth);

Параметры

text
Определяет строку текста, которая будет написана на холсте
x
Координата X начала вывода текста (относительно холста)
y
Координата Y начала вывода текста (относительно холста)
maxWidth
Необязательный параметр. Максимально разрешенная ширина текста в пикселях

Спецификация

Пример

Напишем "Hello world!" и "Big smile!" (с градиентом) используя fillText():

Ваш браузер не поддерживает HTML5 тег canvas.

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)

Ссылки