<캔버스>
HTML <canvas> 태그
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<canvas id="myCanvas">你的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
브라우저 지원
IE 9 , Firefox, Opera, Chrome 및 Safari는 <canvas> 태그를 지원합니다.
참고: IE 8 이하 버전의 IE 브라우저는 <canvas> 태그를 지원하지 않습니다.
태그 정의 및 사용 지침
<canvas> 태그는 스크립트(일반적으로 JavaScript)를 사용하여 그래픽(예: 차트 및 기타 이미지)을 그립니다.
<canvas> 태그는 그래픽 컨테이너일 뿐이므로 그래픽을 그리려면 스크립트를 사용해야 합니다.
HTML 4.01과 HTML5의 차이점
<canvas> 태그는 HTML5의 새로운 태그입니다.
팁 및 메모
참고: <canvas> 요소 내의 모든 텍스트는 <canvas>를 지원하지 않는 브라우저에 표시됩니다.
팁: 캔버스 객체의 모든 속성과 메서드에 대해 알아보려면 HTML 캔버스 참조 매뉴얼을 참조하세요.
Attributes
New : HTML5의 새로운 속성.
| Property | Value | Description |
|---|---|---|
| heightNew | pixels | 캔버스의 높이를 지정합니다. |
| widthNew | pixels | 캔버스의 너비를 지정합니다. |
전역 속성
<canvas> 태그는 HTML 전역 속성을 지원합니다.
이벤트 속성
<canvas> 태그는 HTML 이벤트 속성을 지원합니다.
