- Рисование текста
В HTML5 элемент холста поддерживает простую визуализацию текста построчно. Есть два метода fillText () и strokeText () для рисования текста на холсте. Вы можете использовать свойство font (type: string), чтобы указать ряд параметров текста, таких как стиль, вес, размер и шрифт. Стиль может быть обычным, курсивом или полужирным. Стиль по умолчанию нормальный.
Пример кода свойства шрифта:
ctx.font = 'italic 400 12px, sans-serif';
Толщина шрифта «400» не отображается, потому что это значение по умолчанию.
Метод fillText ()
Метод fillText () используется для визуализации текста с заливкой на холсте с использованием текущего стиля и шрифта заливки.
Синтаксис:
ctx.fillText (text, x, y, maxWidth)
Параметры
Тип
Описание
text
string
Текстовые символы для рисования на холсте.
x
number
Горизонтальная координата начала рисования текста относительно холста.
y
number
Вертикальная координата начала рисования текста относительно холста.
maxWidth
number
Максимально возможная ширина текста.
Пример: HTML5 Canvas рисует текст с помощью метода fillText ()
Следующий веб-документ рисует текст используя метод fillText () и свойство font.
Вывод:
Код:
Холст HTML5 - текст var canvas = document.getElementById ("DemoCanvas"); if (canvas. getContext) {var ctx = canvas.getContext ('2d'); ctx.font = 'курсив 32px без засечек'; ctx.fillText ('Учебное пособие по HTML5 Canvas', 10, 50); }Метод strokeText ()
Метод strokeText () используется для визуализации указанного текст в указанной позиции с использованием текущего свойства font, lineWidth и strokeStyle.
Синтаксис:
ctx.strokeText ( text, x, y, maxWidth);
Параметры Тип Описание text string Текстовые символы для рисования на холсте. x number Горизонтальная координата для начала рисования текст относительно холста. y number Вертикальная координата для начать рисовать текст относительно холста. maxWidth number Максимум возможная ширина текста. Пример: HTML5 Canvas отрисовывает текст с помощью метода strokeText ()
Следующий веб-документ рисует текст, используя метод strokeText () и свойства font, lineWidth.
Вывод:
Код:
Холст HTML5 - Текст холст> var canvas = document.getElementById ("DemoCanvas"); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); ctx.font = "курсив 36px Неизвестный шрифт, без засечек"; ctx.strokeStyle = "красный"; //устанавливаем красный цвет обводки ctx.lineWidth = "1.5"; //устанавливаем ширину штриха на 1,5 для (var i = 40; i Пример: рисование текста с помощью метода fillText () и линейного градиента Следующий веб-документ рисует текст, заполненный линейным градиентом. Вывод: Код:HTML5 Canvas - Text var canvas = document.getElementById ("DemoCanvas"); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); gradient = ctx.createLinearGradient (0, 0, canvas.width , 0);//Добавляем цвета с фиксированными стопами на 25% ширины. Gradient.addColorStop ("0", "red"); gradient.addColorStop (". 25", "yellow"); gradient.addColorStop ( ".50", "green"); gradient.addColorStop (". 75", "blue"); gradient.addColorStop ("1.0", "magenta");//Используем gradient.ctx.font = "italic 700 25px Неизвестный шрифт, без засечек "; ctx .fillStyle = градиент; for (var i = 0; i Text Alignment В холсте HTML5 свойство textAlign используется для установки выравнивания текста на холсте. Возможные значения - начало, конец, левый, правый и центральный. Значение по умолчанию: начало. start: текст выравнивается по нормальному началу строки (по левому краю для левого языковые стандарты -направо, с выравниванием по правому краю для языков с написанием справа налево). end: текст выравнивается по нормальному концу строки (выравнивается по правому краю для языков с письмом слева направо). locales, с выравниванием по левому краю для языков с написанием справа налево). left: текст выровнен по левому краю. right: текст выровнен по правому краю. center: текст центрируется. Синтаксис: ctx .textAlign = value Пример: холст HTML5, рисование текста с использованием выравнивания текста В следующем примере кода показаны все значения свойств свойства textAlign. Вывод: Код:Холст HTML5 - текст var canvas = document.getElementById ("DemoCanvas"); if (canvas. getContext) {var ctx = canvas.getContext ('2d');//Создаем линию в точке привязки .ctx.strokeStyle = "blue"; ctx.textAlign = "center"; ctx.moveTo (150, 60); ctx.lineTo (150, 330); ctx.stroke (); ctx.strokeStyle = "зеленый"; ctx.font = "20px без засечек"; ctx.textAlign = "start"; ctx.fillText ("Начальная позиция" , 150, 100); ctx.textAlign = "end"; ctx.fillText ("Конечная позиция", 150, 150); ctx.textAlign = "left"; ctx.fillText ("Выравнивание по левому краю", 150, 200); ctx.textAlign = "center"; ctx.fillText ("Выравнивание по центру", 150, 250); ctx.textAlign = "right"; ctx.fillText ("Выравнивание по правому краю", 150, 300);} Базовая линия текста В холсте HTML5 textB Свойство aseline используется для получения или установки текущих настроек для выравнивания базовой линии шрифта. Допустимые значения: верхний, висящий, средний, буквенный, идеографический, нижний. top: верхняя часть квадрата с длинной строчкой. висит: висячая базовая линия. middle: середина длинного квадрата. алфавитный: по умолчанию. Базовая линия по алфавиту. ideographic: идеографическая базовая линия. bottom: нижняя часть квадрата em. ctx.textBaseline = value Положение каждого базового значения относительно ограничивающей рамки показано в следующее изображение: Пример: холст HTML5, пример базовой линии текста В следующем примере текст центрирован по вертикали (textBaseline = 'middle) в ограничивающей рамке. Код:HTML5 Canvas - текст var canvas = document.getElementById ("DemoCanvas" ); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); for (i = 0; i Текстовые показатели В холсте HTML5 метод measureText () используется для получения текста особенности текста HTML5 Canvas. Метод возвращает объект, содержащий ширину (в пикселях) указанного текста. Синтаксис: var textWidth = ctx. measureText (text) Пример: холст HTML5, пример текстовых показателей В следующем примере возвращается ширина (в пикселях) заданный текст.Холст HTML5 - Текст var canvas = document.getElementById ("DemoCanvas"); if (canvas.getContext) {var ctx = canvas.getContext ('2d '); var text =' w3resource '; ctx.font = "24px Неизвестный шрифт, без засечек"; ctx.fillText (текст, 120, 40); var metrics = ctx.measureText (текст); оповещение (metrics.width); } Редактор кода: См. перо Общий редактор html css от w3resource (@ w3resource) onCodePen. - Метод fillText ()
- Text Alignment
- Базовая линия текста
- Пример: холст HTML5, пример базовой линии текста
- Текстовые показатели
Рисование текста
В HTML5 элемент холста поддерживает простую визуализацию текста построчно. Есть два метода fillText () и strokeText () для рисования текста на холсте. Вы можете использовать свойство font (type: string), чтобы указать ряд параметров текста, таких как стиль, вес, размер и шрифт. Стиль может быть обычным, курсивом или полужирным. Стиль по умолчанию нормальный.
Пример кода свойства шрифта:
ctx.font = 'italic 400 12px, sans-serif';
Толщина шрифта «400» не отображается, потому что это значение по умолчанию.
Метод fillText ()
Метод fillText () используется для визуализации текста с заливкой на холсте с использованием текущего стиля и шрифта заливки.
Синтаксис:
ctx.fillText (text, x, y, maxWidth)
Параметры | Тип | Описание |
---|---|---|
text |
string | Текстовые символы для рисования на холсте. |
x | number | Горизонтальная координата начала рисования текста относительно холста. |
y | number | Вертикальная координата начала рисования текста относительно холста. |
maxWidth | number | Максимально возможная ширина текста. |
Пример: HTML5 Canvas рисует текст с помощью метода fillText ()
Следующий веб-документ рисует текст используя метод fillText () и свойство font.
Вывод:
Код:
Холст HTML5 - текст var canvas = document.getElementById ("DemoCanvas"); if (canvas. getContext) {var ctx = canvas.getContext ('2d'); ctx.font = 'курсив 32px без засечек'; ctx.fillText ('Учебное пособие по HTML5 Canvas', 10, 50); } Метод strokeText ()
Метод strokeText () используется для визуализации указанного текст в указанной позиции с использованием текущего свойства font, lineWidth и strokeStyle.
Синтаксис:
ctx.strokeText ( text, x, y, maxWidth);
Параметры
Тип
Описание
text
string
Текстовые символы для рисования на холсте.
x
number
Горизонтальная координата для начала рисования текст относительно холста.
y
number
Вертикальная координата для начать рисовать текст относительно холста.
maxWidth
number
Максимум возможная ширина текста.
Пример: HTML5 Canvas отрисовывает текст с помощью метода strokeText ()
Следующий веб-документ рисует текст, используя метод strokeText () и свойства font, lineWidth.
Вывод:
Код:
Холст HTML5 - Текст холст> var canvas = document.getElementById ("DemoCanvas"); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); ctx.font = "курсив 36px Неизвестный шрифт, без засечек"; ctx.strokeStyle = "красный"; //устанавливаем красный цвет обводки ctx.lineWidth = "1.5"; //устанавливаем ширину штриха на 1,5 для (var i = 40; i
Пример: рисование текста с помощью метода fillText () и линейного градиента
Следующий веб-документ рисует текст, заполненный линейным градиентом.
Вывод:
Код:
HTML5 Canvas - Text var canvas = document.getElementById ("DemoCanvas"); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); gradient = ctx.createLinearGradient (0, 0, canvas.width , 0);//Добавляем цвета с фиксированными стопами на 25% ширины. Gradient.addColorStop ("0", "red"); gradient.addColorStop (". 25", "yellow"); gradient.addColorStop ( ".50", "green"); gradient.addColorStop (". 75", "blue"); gradient.addColorStop ("1.0", "magenta");//Используем gradient.ctx.font = "italic 700 25px Неизвестный шрифт, без засечек "; ctx .fillStyle = градиент; for (var i = 0; i
Text Alignment
В холсте HTML5 свойство textAlign используется для установки выравнивания текста на холсте. Возможные значения - начало, конец, левый, правый и центральный. Значение по умолчанию: начало.
- start: текст выравнивается по нормальному началу строки (по левому краю для левого языковые стандарты -направо, с выравниванием по правому краю для языков с написанием справа налево).
- end: текст выравнивается по нормальному концу строки (выравнивается по правому краю для языков с письмом слева направо). locales, с выравниванием по левому краю для языков с написанием справа налево).
- left: текст выровнен по левому краю.
- right: текст выровнен по правому краю.
- center: текст центрируется.
Синтаксис:
ctx .textAlign = value
Пример: холст HTML5, рисование текста с использованием выравнивания текста
В следующем примере кода показаны все значения свойств свойства textAlign.
Вывод:
Код:
Холст HTML5 - текст var canvas = document.getElementById ("DemoCanvas"); if (canvas. getContext) {var ctx = canvas.getContext ('2d');//Создаем линию в точке привязки .ctx.strokeStyle = "blue"; ctx.textAlign = "center"; ctx.moveTo (150, 60); ctx.lineTo (150, 330); ctx.stroke (); ctx.strokeStyle = "зеленый"; ctx.font = "20px без засечек"; ctx.textAlign = "start"; ctx.fillText ("Начальная позиция" , 150, 100); ctx.textAlign = "end"; ctx.fillText ("Конечная позиция", 150, 150); ctx.textAlign = "left"; ctx.fillText ("Выравнивание по левому краю", 150, 200); ctx.textAlign = "center"; ctx.fillText ("Выравнивание по центру", 150, 250); ctx.textAlign = "right"; ctx.fillText ("Выравнивание по правому краю", 150, 300);}
Базовая линия текста
В холсте HTML5 textB Свойство aseline используется для получения или установки текущих настроек для выравнивания базовой линии шрифта. Допустимые значения: верхний, висящий, средний, буквенный, идеографический, нижний.
- top: верхняя часть квадрата с длинной строчкой.
- висит: висячая базовая линия.
- middle: середина длинного квадрата.
- алфавитный: по умолчанию. Базовая линия по алфавиту.
- ideographic: идеографическая базовая линия.
- bottom: нижняя часть квадрата em.
ctx.textBaseline = value
Положение каждого базового значения относительно ограничивающей рамки показано в следующее изображение:
Пример: холст HTML5, пример базовой линии текста
В следующем примере текст центрирован по вертикали (textBaseline = 'middle) в ограничивающей рамке.
Код:
HTML5 Canvas - текст var canvas = document.getElementById ("DemoCanvas" ); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); for (i = 0; i
Текстовые показатели
В холсте HTML5 метод measureText () используется для получения текста особенности текста HTML5 Canvas. Метод возвращает объект, содержащий ширину (в пикселях) указанного текста.
Синтаксис:
var textWidth = ctx. measureText (text)
Пример: холст HTML5, пример текстовых показателей
В следующем примере возвращается ширина (в пикселях) заданный текст.
Холст HTML5 - Текст var canvas = document.getElementById ("DemoCanvas"); if (canvas.getContext) {var ctx = canvas.getContext ('2d '); var text =' w3resource '; ctx.font = "24px Неизвестный шрифт, без засечек"; ctx.fillText (текст, 120, 40); var metrics = ctx.measureText (текст); оповещение (metrics.width); }
Редактор кода:
См. перо Общий редактор html css от w3resource (@ w3resource) onCodePen.