ホーム HTML CSS XML JAVASCRIPT   PHP SQL MORE...   リファレンス 事例集    

HTML5 チュートリアル

HTML5 ホーム
HTML5 概要
HTML5 新しい要素
HTML5 ビデオ
HTML5 ビデオ/DOM
HTML5 オーディオ
HTML5 キャンバス
HTML5 Geolocation
HTML5 Web ストレージ

HTML5 フォーム

HTML5 Input タイプ
HTML5 フォーム要素
HTML5 フォーム属性

HTML5 リファレンス

HTML5 タグ
HTML5 属性
HTML5 イベント
HTML5 キャンバス 2d
HTML 妥当な DTD

HTML5 タグ

<!-->
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<command>
<datalist>
<dd>
<del>
<details>
<dfn>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> - <h6>
<head>
<header>
<hgroup>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<keygen>
<kbd>
<label>
<legend>
<li>
<link>
<map>
<mark>
<menu>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

HTML5 canvas textBaseline 属性

HTML5 track Tag Reference HTML5 canvas リファレンス

例

異なる textBasline 配置を使用してテキストを記述します:

あなたのブラウザは canvas タグをサポートしていません。

JavaScript:

...
ctx.textBaseline="bottom";
ctx.fillText("Bottom",10,50);
ctx.textBaseline="middle";
ctx.fillText("Middle",97,50);
ctx.textBaseline="top";
ctx.fillText("Top",175,50);
...

Try it yourself »

定義と用法

textBaseline 属性はキャンバスの垂直方向にテキストを配置するために使用します。

文字を走り抜ける線を想像してみてください:

textBaseline example

テキストを配置するときに、fillText() と strokeText() メソッドはこれらの行を使用します。

異なる属性値は、次の出力を生成します:

textBaseline example

デフォルト値: alphabetic
JavaScript 構文: context.textBaseline="middle";

ブラウザ・サポート

Internet Explorer Firefox Opera Google Chrome Safari

textBaseline 属性は、主要な全ブラウザがサポートしていますが、特に "hanging" と "ideographic" の値を使用する場合は、いくつかの相違点があります。

属性値

値 説明 Play it
alphabetic alphabetic 線にテキストの垂直方向に配置する（上図を参照） Play it »
bottom bottom 線にテキストの垂直方向に配置する（上図を参照） Play it »
hanging hanging-line にテキストを垂直方向に配置する（上図を参照） Play it »
ideographic ideographical 線にテキストを垂直方向に配置する（上図を参照） Play it »
middle top 線にテキストを垂直方向に配置する（上図を参照） Play it »

HTML5 track Tag Reference HTML5 canvas リファレンス