HTML холст TextBaseline недвижимость
примеров
В у = 100 Нарисовать красную линию, то у = 100 Чу TextBaseline с различными значениями помещаются каждое слово:
JavaScript:
var ctx=c.getContext("2d");
//Draw a red line at y=100
ctx.strokeStyle="red";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//Place each word at y=100 with different textBaseline values
ctx.textBaseline="top";
ctx.fillText("Top",5,100);
ctx.textBaseline="bottom";
ctx.fillText("Bottom",50,100);
ctx.textBaseline="middle";
ctx.fillText("Middle",120,100);
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",190,100);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",290,100);
Попробуйте »
Поддержка браузеров
Internet Explorer 9, Firefox, Opera, Chrome и Safari поддержка TextBaseline собственности.
Примечание: TextBaseline приписывают различные эффекты на различных браузерах, особенно использование "висит" или "идеографическая" , когда.
Примечание: 8 и более ранние версии Internet Explorer не поддерживают элемент <Canvas>.
Определение и использование
TextBaseline наборов свойств или возвращает текст при составлении текущего базовой линии текста.
На следующем рисунке показаны TextBaseline исходные атрибуты поддерживаются:
Примечание: fillText () и strokeText () метод на холсте при размещении текста будет использоваться TextBaseline указано значение.
| По умолчанию: | буквенный |
|---|---|
| Синтаксис JavaScript: | Контекст .textBaseline = "алфавитный | верх |висит | средний | идеографическая | снизу"; |
Значение свойства
| 值 | 描述 |
|---|---|
| alphabetic | 默认。文本基线是普通的字母基线。 |
| top | 文本基线是 em 方框的顶端。 |
| hanging | 文本基线是悬挂基线。 |
| middle | 文本基线是 em 方框的正中。 |
| ideographic | 文本基线是表意基线。 |
| bottom | 文本基线是 em 方框的底端。 |