HTML リファレンスマニュアル

HTML タグ一覧

HTML canvas height 属性

height属性を使用してピクセル単位で<canvas>要素の高さを指定し、キャンバスの高さや幅を再設定するたびに、キャンバスの内容がクリアされます。

オンラインサンプル

高さと幅が200ピクセルの<canvas>要素：

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML <canvas> height 属性の使用-基本チュートリアル(oldtoolbag.com)</title>
</head>
<body>
<canvas　id="myCanvas"　width="200"　height="200"　style="border:1px　solid">
あなたのブラウザはHTML5　canvas　tag.
</canvas>
<script>
var　c　=　document.getElementById("myCanvas");
var　ctx　=　c.getContext("2d");
ctx.fillStyle　=　"#92B901";
ctx.fillRect(50,　50,　100,　100);
</script>
</body>
</html>

テストを見てみる ‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

すべての主要ブラウザはheight属性をサポートしています。

注意： Internet Explorer 8 及びより古いIEバージョンでは<canvas>タグをサポートしていません。

定義と使用法

height属性を使用してピクセル単位で<canvas>要素の高さを指定します。
ヒント：width属性を使用してピクセル単位で<canvas>要素の幅を指定します。

ヒント： キャンバスの高さや幅を再設定するたびに、キャンバスの内容がクリアされます（ページの下部の例を参照してください）。

ヒント： 当社の HTML Canvas チュートリアルで <canvas> に関する知識をさらに学んでください。

HTML 4.01 と HTML 5 の間の違い

<canvas> は HTML5 の新しいタグです。

構文

<canvas height="pixels">

属性値

値	説明
pixels	キャンバスの高さをピクセル単位で指定します（例えば "100px" または単に "100"）。デフォルトは "150"。

さらに例

widthまたはheight属性（JavaScriptを使用して）を設定することでキャンバスをクリアします：

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML <canvas> width 属性の使用-基本チュートリアル(oldtoolbag.com)</title>
</head>
<body>
<canvas　id="myCanvas"　width="200"　height="200"　style="border:1px　solid">
あなたのブラウザはHTML5　canvas　tag.
</canvas>
<br>
<script>
var　c　=　document.getElementById("myCanvas");
var　ctx　=　c.getContext("2d");
ctx.fillStyle　=　"#92B901";
ctx.fillRect(50,　50,　100,　100);
function　clearCanvas()　{
　　c.height　=　300;
}
</script>
<button　onclick="clearCanvas()">Clear　canvas</button>
</body>
</html>

テストを見てみる ‹/›

HTML <canvas> タグ

HTML: <template> タグ