From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../textbaseline/index.html | 100 +++++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 files/ru/web/api/canvasrenderingcontext2d/textbaseline/index.html (limited to 'files/ru/web/api/canvasrenderingcontext2d/textbaseline') diff --git a/files/ru/web/api/canvasrenderingcontext2d/textbaseline/index.html b/files/ru/web/api/canvasrenderingcontext2d/textbaseline/index.html new file mode 100644 index 0000000000..545cf211b5 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/textbaseline/index.html @@ -0,0 +1,100 @@ +--- +title: CanvasRenderingContext2D.textBaseline +slug: Web/API/CanvasRenderingContext2D/textBaseline +tags: + - API + - Canvas + - Property +translation_of: Web/API/CanvasRenderingContext2D/textBaseline +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.textBaseline - свойство Canvas 2D API, указывающее на текущую базовую линию при рисовании текста.

+ +

Синтаксис

+ +
ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";
+
+ +

Опции

+ +

Возможные значения:

+ +
+
"top"
+
The text baseline is the top of the em square.
+
"hanging"
+
The text baseline is the hanging baseline. (Used by Tibetan and other Indic scripts.)
+
"middle"
+
The text baseline is the middle of the em square.
+
"alphabetic"
+
The text baseline is the normal alphabetic baseline. Значение по умолчанию.
+
"ideographic"
+
The text baseline is the ideographic baseline; this is the bottom of the body of the characters, if the main body of characters protrudes beneath the alphabetic baseline. (Used by Chinese, Japanese, and Korean scripts.)
+
"bottom"
+
The text baseline is the bottom of the bounding box. This differs from the ideographic baseline in that the ideographic baseline doesn't consider descenders.
+
+ +

Примеры

+ +

Сравнение значений свойства

+ +

Этот пример демонстрирует различные значения свойства textBaseline и отображение линий при их приминениях.

+ +

HTML

+ +
<canvas id="canvas" width="550" height="500"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'];
+ctx.font = '36px serif';
+ctx.strokeStyle = 'red';
+
+baselines.forEach(function (baseline, index) {
+  ctx.textBaseline = baseline;
+  let y = 75 + index * 75;
+  ctx.beginPath();
+  ctx.moveTo(0, y + 0.5);
+  ctx.lineTo(550, y + 0.5);
+  ctx.stroke();
+  ctx.fillText('Abcdefghijklmnop (' + baseline + ')', 0, y);
+});
+
+ +

Результат

+ +

{{ EmbedLiveSample('Comparison_of_property_values', 700, 550) }}

+ +

Спецификации

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}}{{Spec2('HTML WHATWG')}} 
+ +

Поддержка браузерами

+ + + +

{{Compat("api.CanvasRenderingContext2D.textBaseline")}}

+ +

Смотрите также

+ + -- cgit v1.2.3-54-g00ecf