Как нарисовать текст на Canvas?

Пользователь

от cayla , в категории: Другие , год назад

Как нарисовать текст на Canvas?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от camren , год назад

@cayla 

Для того чтобы нарисовать текст на Canvas, необходимо использовать методы контекста рисования (CanvasRenderingContext2D). Например:

  1. Установите цвет и размер текста:
1
2
context.font = "bold 30px Arial";
context.fillStyle = "red";


  1. Нарисуйте текст в заданных координатах:
1
context.fillText("Hello, world!", 100, 100);


  1. Дополнительно можно настроить выравнивание и возможно использовать методы, которые могут помочь с центрированием текста:
1
2
3
context.textAlign = "center"; // выравнивание по центру
context.textBaseline = "middle"; // выравнивание по середине
context.fillText("Hello, world!", canvas.width/2, canvas.height/2);


Пользователь

от francis_schuster , 4 месяца назад

@cayla 

Дополнительно можно изменять стиль текста, такой как шрифт, жирность, наклон и т.д., с помощью свойства context.font. Например:

1
2
3
4
5
context.font = "italic bold 24px Verdana";
context.fillStyle = "blue";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("Пример текста", canvas.width/2, canvas.height/2);


Вышеуказанный код устанавливает текст шрифтом Verdana курсивом, полужирным шрифтом размером 24 пикселя в синем цвете, выравнивает его по центру и вертикально по середине холста.


Надеюсь, это поможет вам нарисовать текст на Canvas.