HTML 참조 설명서

HTML 태그 모음

HTML canvas width 속성

width 속성을 사용하여 픽셀 단위로 <canvas> 요소의 너비를 지정합니다. 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 태그.
</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 中新태그.

Syntax

<canvas width="pixels">

속성 값

Value	Description
pixels	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 태그.
</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> 태그