Текст Canvas HTML

Рисование текста на экране

Чтобы нарисовать текст на экране, самыми важными свойствами и методами являются:

• font - Определяет свойства шрифта текста
• fillText(text,x,y) - Рисуйте "заполненный" текст на экране
• strokeText(text,x,y) - Рисуйте текст на экране (без заливки)

Используйте fillText()

Пример

Установите шрифт "30px Arial" и напишите заполненный текст на экране:

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

Попробуйте сами

Используйте strokeText()

Пример

Установите шрифт "30px Arial" и напишите текст на экране (без заливки):

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

Попробуйте сами

Добавьте цвет и выравнивание текста по центру

Пример

Установите шрифт "30px Comic Sans MS" и напишите заполненный красным текст в центре экрана:

JavaScript:

const canvas = document.getElementById("myCanvas");
const 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);

Попробуйте сами

Дополнительная информация:

Полное руководство по Canvas CodeW3C.com