HTML <canvas> 태그

정의 및 특징

・<canvas> 태그는

　주로 자바스크립트와 같은 스크립트를 이용하여

　그래픽 콘텐츠를 그릴 때 사용한다

 

・<canvas> 요소는 그래픽 콘텐츠를 위한 컨테이너일 뿐

　실제로 그림을 그리는 동작은 스크립트를 사용하여 구현한다

 

・<canvas> 요소 내부에 존재하는 텍스트는

　해당 브라우저가 <canvas> 요소를 지원하지 않을 경우

　브라우저 화면에 대신 나타나게 된다

 

・<canvas> 태그는

　HTML5에서 새롭게 추가된 요소이다

 

 

지원하는 브라우저

1.0	지원함	9.0	1.5	2.0	9.0

 

속성

속성명	속성값	설명
height	픽셀	<canvas> 요소의 높이를 픽셀(pixel) 단위로 명시한다
width	픽셀	<canvas> 요소의 너비를 픽셀(pixel) 단위로 명시한다

 

예제

<canvas id="myCanvas" style="border: 2px solid black">
이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다!
</canvas>
    
<script>
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.fillStyle = "yellow";
        context.fillRect(0,0,150,100);
</script>

이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다!

 

 

■HTML 태그 레퍼런스

HTML 태그 레퍼런스 - MAIN 돌아가기