W3docs
ru
Войти

Текст на Canvas

HTML5 canvas allows creating text using font and text properties. See examples of the fillText, strokeText properties, and example of adding color and centering text.

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()

<!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>
Попробуйте сами »

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

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

<!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>
Попробуйте сами »

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

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

<!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>
Попробуйте сами »

Практика

Практика

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