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

strokeText()

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

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

Примечание: Параметр maxWidth не поддерживается в Safari 5.1 и более ранних версиях.

Синтаксис

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

Параметры

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

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

Пример

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

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

JavaScript:

var c = document.getElementById('myCanvas')
var ctx = c.getContext('2d')

ctx.font = '20px Georgia'
ctx.strokeText('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.strokeStyle = gradient
ctx.strokeText('Big smile!', 10, 90)

Ссылки