CanvasRenderingContext2D.fillText()

CanvasRenderingContext2D.fillText() - малює заповнений текст.

Синтаксис:

ctx.fillText(text, x, y [, maxWidth]);

Параметри:

ctx - об'єкт CanvasRenderingContext2D.

text - текст який потрібно намалювати.

x - координати по осі x початкової точки прямокутника.

y - координати по осі y початкової точки прямокутника.

maxWidth - не обов'язково вказувати. Максимальна ширина малювання тексту. Якщо малювання тексту буде більше за maxWidth то текст маштабується під максимальну ширину.

Опис:

fillText() метод об'єкту CanvasRenderingContext2D який малює залитий текст за вказаними координатами на полотні canvas.

Текст малюється використовуючи властивості: font, textAligntextBaseline, direction і fillStyle.

Приклад:

Ваш браузер не підтримує canvas. var canvas = document.getElementById("canvas").getContext("2d"); canvas.fillStyle="blue"; canvas.font="18pt Arial"; canvas.fillText("JavaScript", 8, 50); var el = document.getElementById("canvas"); var canvas = el.getContext("2d"); canvas.font="22pt sans-serif"; canvas.fillStyle="red"; canvas.fillText("JavaScript Canvas", 5, 28, 95);

Малюємо вертикальний текст на полотні canvas, обертаючи матрицю методом rotate():

var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'red'; //перевертаємо матрицю ctx.rotate( 1.5707963267948966 ); //90градусів ctx.font="14px Arial"; ctx.fillText("яваскрипт.укр", 10, -25); //скидаємо матрицю ctx.resetTransform(); ctx.fillText("текст", 40, 15);