HTML Canvas Текст
Малювання тексту в Canvas
Для малювання тексту в Canvas найважливішими властивостями та методами є:
- font - визначає властивості шрифту для тексту
- fillText(text,x,y) - малює "залитий" текст на полотні
- strokeText(text,x,y) - малює текст на полотні (без заливки)
Використання fillText()
Приклад
Встановити шрифт "Arial" на 30 пікселів і написати на полотні залитий текст:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
Спробуйте самі »
Використання strokeText()
Приклад
Встановити шрифт "Arial" на 30 пікселів і написати текст без заливки на полотні:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
Спробуйте самі »
Додати колір і центрувати текст
Приклад
Встановити шрифт 30 пікселів "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);
Спробуйте самі »
