Текст холста HTML
Рисование текста на холсте
Для рисования текста на холсте наиболее важными свойствами и методами являются:
- font - определяет свойства шрифта для текста
- fillText( text,x,y ) - рисует "залитый" текст на холсте
- strokeText( text,x,y ) - рисует текст на холсте (без заливки)
Использование заполнениятекста()
Пример
Установите шрифт на 30px «Arial» и напишите заполненный текст на холсте:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
Использование штрихтекста()
Пример
Установите шрифт на 30px «Arial» и напишите текст без заливки на холсте:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
Добавить цвет и текст по центру
Пример
Установите шрифт на 30px «Comic Sans MS» и напишите заполненный красный текст в центре холста:
JavaScript:
var
canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);