Рисование текста на Canvas в HTML5

HTML5 Canvas может использовать различные шрифты, размеры и цвета для рисования текста на канвасе HTML5, внешний вид текста контролируется этими свойствами font 2D контекста, чтобы нарисовать текст, используйте функции fillText() или strokeText().

Онлайн пример

Можно использовать различные шрифты, размеры и цвета для рисования текста на канвасе HTML5.
Внешний вид текста контролируется этими свойствами font 2D контекста. Кроме того, вам нужно установить fillStyle или strokeStyle 2D контекстного свойства в зависимости от того, нужно ли рисовать заполненный текст или обведенный текст.
Чтобы нарисовать текст, используйте функции fillText() или strokeText()
Это пример простого кода:

<canvas id="ex1" width="500" height="100" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas не поддерживается
</canvas>
<script>
　　　var canvas = document.getElementById("ex1");
　　　var context = canvas.getContext("2d");
　　　context.font = "36px Verdana";
　　　context.fillStyle = "#000000";
　　　context.fillText("HTML5　Canvas　Text", 50, 50);
　　　context.font = "normal 36px Arial";
　　　context.strokeStyle = "#000000";
　　　context.strokeText("HTML5 Canvas Text", 50, 90);
　</script>

Это результат рисования на канвасе:

Шрифт и стиль

При рисовании текста на канвасе HTML5 необходимо установить используемый шрифт. Это достигается через установку значения свойства font 2D контекста. Это свойство является строкой с兼容ными значениями CSS, имеющей формат:

[стиль_шрифта][вес_шрифта][размер_шрифта][лицо_шрифта]

Например

context.font = "normal normal 20px Verdana";

Вы можете установить следующие значения для каждой части строки шрифта:

Обратите внимание, что не каждый браузер поддерживает все значения. Перед использованием их в зависимости от них, вам нужно будет протестировать значения, которые вы планируете использовать.
Вот еще один пример:

"italic bold 36px Arial"

Рисуемый текст

Как уже упоминалось, при рисовании текста на HTML5 канве, вы можете рисовать заливной текст или текст с контуром. Вы можете использовать функции fillText() и strokeText() 2D контекста для выполнения этого. Определения этих функций такие:

fillText (textString, x, y [, maxWidth]);
strokeText (textString, x, y [, maxWidth]);

Параметр textString - это рисуемый текст.
X и Y представляют собой положение в тексте. Параметр x является местом начала текста. Параметр y - это положение текста вертикально, но точное представление зависит от текстовой оси. Текстовая ось будет рассмотрена в后面的 части.
Этот maxWidth текст перекрывает нижнюю часть.
Вот пример кода:

context.font = "36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML5　Canvas　Text", 50, 50);

Максимальная ширина текста

Опциональный параметр maxWidth информирует канву, что текст не может занимать больше места в горизонтальном направлении, чем указанное значение параметра. Если текст слишком широк, чтобы поместиться в maxWidth, его ширина будет сжата. Он не разрезается. Вот пример кода с использованием и без использования绘制 одного и того же текста с maxWidth:

context.font = "36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML5　Canvas　Text", 50, 50);
context.fillText("HTML5　Canvas　Text", 50, 100, 200);

Вот как эти два текста выглядят при рисовании на HTML5 канве:

Как вы видите, ширина второго текста сжата, чтобы соответствовать maxWidth 200 пикселей.

Цвет текста

Как и любой другой формы, использование свойств fillStyle и strokeStyle 2D контекста для установки цвета заливки или обводки текста. Здесь я не буду более подробно介绍ать эти свойства. Дополнительную информацию см. в描边和填充。

测量文字宽度

2D上下文对象具有可以测量文本像素宽度的功能。它无法测量高度。该函数称为measureText()。这是一个代码示例:

var textMetrics = context.measureText("measure this");
var width = textMetrics.width;

测量文本的宽度可用于计算文本字符串是否适合特定空间等。

文字基线

文本基线确定如何解释和 的y参数。换句话说，垂直放置文本的位置以及该位置的解释方式。请注意，浏览器在解释此属性的方式上也可能会有细微的差异。 fillText()strokeText()
使用textBaseline2D上下文的属性设置文本基线。以下是它可以采用的值及其含义:

这是一个示例，该示例y对所有文本使用相同的值（75）绘制文本，但对所绘制的每个文本使用不同的基线。将画一条线y=75，向您显示如何围绕该y值设置文本基线。

以下是生成上述图形的代码:

context.strokeStyle = "#000000";
context.lineWidth = 1;
context.beginPath();
context.moveTo(0, 75);
context.lineTo(500, 75);
context.stroke();
context.closePath();
context.font = "16px Verdana";
context.fillStyle = "#000000";
context.textBaseline = "top";
context.fillText("top", 0, 75);
context.textBaseline = "hanging";
context.fillText("hanging", 40, 75);
context.textBaseline = "middle";
context.fillText("middle", 120, 75);
context.textBaseline = "alphabetic";
context.fillText("alphabetic", 200, 75);
context.textBaseline = "ideographic";
context.fillText("ideographic", 300, 75);
context.textBaseline = "bottom";
context.fillText("bottom-glyph", 400, 75);

Выравнивание текста

Свойство textAlign свойства 2D контекста defines, как текст выравнивается при рисовании. Иными словами, свойство textAlign определяет координаты x при рисовании текста.

Ниже приведены примеры, показывающие, как работает свойство textAlign. Вертикальные линии рисуются в месте x = 250. Все тексты также рисуются в месте x = 250, но значения свойства textAlign различаются.

Это пример кода графического элемента:

<canvas id="ex4" width="500" height="120" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas не поддерживается
</canvas>
<script>
var canvas = document.getElementById("ex4");
var context = canvas.getContext("2d");
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.beginPath();
context.moveTo(250, 0);
context.lineTo(250, 250);
context.stroke();
context.closePath();
context.font = "16px Verdana";
context.fillStyle = "#000000";
context.textAlign = "center";
context.fillText("center", 250, 20);
context.textAlign = "start";
context.fillText("start", 250, 40);
context.textAlign = "end";
context.fillText("end", 250, 60);
context.textAlign = "left";
context.fillText("left", 250, 80);
context.textAlign = "right";
context.fillText("right", 250, 100);
</script>

Результат выполнения кода如下: