Текст на Canvas

HTML5 canvas позволяет создавать текст с использованием различных свойств шрифта и текста, представленных ниже:

Свойства и методы

Свойство / Метод	Описание
font	Возвращает текущие настройки шрифта и может быть изменён для смены шрифта.
textAlign	Возвращает текущие настройки выравнивания текста и может быть изменён для смены выравнивания. Свойство принимает следующие значения: start, end, left, right и center. Обратите внимание, что start и end зависят от направления текста.
textBaseline	Возвращает текущие настройки выравнивания по базовой линии и может быть изменён для смены этого выравнивания. Свойство принимает следующие значения: top, hanging, middle, alphabetic, ideographic и bottom.
fillStyle	Устанавливает цвет, используемый для заливки текста.
strokeStyle	Устанавливает цвет, используемый для обводки текста.
fillText(text, x, y)	Рисует залитый текст в позиции, указанной заданными координатами x и y.
strokeText(text, x, y)	Рисует обводку текста в позиции, указанной заданными координатами x и y.

Пример метода fillText():

Пример метода fillText()

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      var canvas = document.getElementById("exampleCanvas");
      var ctx = canvas.getContext("2d");
      ctx.font = "30px Arial";
      ctx.fillText("Hello World", 70, 80);
    </script>
  </body>
</html>

Try it Yourself »

Пример метода strokeText():

Пример метода strokeText()

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="250" height="150" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      var canvas = document.getElementById("exampleCanvas");
      var ctx = canvas.getContext("2d");
      ctx.font = "27px Arial";
      ctx.strokeText("Canvas text", 40, 70);
    </script>
  </body>
</html>

Try it Yourself »

Пример добавления цвета и центрирования текста:

Пример добавления цвета и центрирования текста

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="400" height="250" style="border:1px solid #d3d3d3;">
      Your browser does not support the canvas element.
    </canvas>
    <script>
      var canvas = document.getElementById("exampleCanvas");
      var ctx = canvas.getContext("2d");
      ctx.font = "40px Comic Sans MS";
      ctx.fillStyle = "red";
      ctx.textAlign = "center";
      ctx.fillText("Canvas Text", canvas.width / 2, canvas.height / 2);
    </script>
  </body>
</html>

Try it Yourself »

Практика

В чём заключается функциональность метода 'fillText()' HTML5 canvas в отношении текста?

Он выводит текст только по указанным координатам.Он измеряет ширину указанного текста.Он выводит текст по указанным координатам и заполняет его текущим fillStyle.Он выводит текст по указанным координатам без опции заливки текста.Он заставляет текст исчезнуть с холста.

Текст на Canvas ​

Свойства и методы ​

Пример метода fillText(): ​

Пример метода strokeText(): ​

Пример добавления цвета и центрирования текста: ​

Практика ​

Текст на Canvas

Свойства и методы

Пример метода fillText():

Пример метода strokeText():

Пример добавления цвета и центрирования текста:

Практика