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

HTMLタグ完全ガイド

HTML canvas width属性

width属性を使用してピクセル単位で<canvas>要素の幅を指定します。

オンラインサンプル

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

サンプル

<!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>
<script>
var　c　=　document.getElementById("myCanvas");
var　ctx　=　c.getContext("2d");
ctx.fillStyle　=　"#92B901";
ctx.fillRect(50,　50,　100,　100);
</script>
</body>
</html>

テストを見てみる ‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

すべての主要ブラウザではwidth属性がサポートされています。

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

定義と使用法

width属性を使用してピクセル単位で<canvas>要素の幅を指定します。

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

ヒント： キャンバスの高さや幅がリセットされると、キャンバスの内容がクリアされます（ページの下部のサンプルを参照してください）。

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

HTML 4.01 と HTML 5 の違い

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

構文

<canvas width="ピクセル">

属性値

値	説明
ピクセル	canvasのwidth属性を指定します。ピクセル単位で指定（例えば「100）。デフォルトのwidthは「300"

さらにサンプル

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> タグ