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 단단한 테두리">
您的浏览器不支持HTML5　canvas 태그.
</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">

속성 값

Value	Description
pixels	canvas의 높이를 픽셀 단위로 지정하세요(예 "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 단단한 테두리">
您的浏览器不支持HTML5　canvas 태그.
</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> 태그