8) 캔버스
캔버스
- 브라우저에 그림을 그리기 위하여 놓는 것
- 단순히 브라우저에 그림을 표현하는 것을 넘어서 여러 가지 효과를 주고, 텍스트를 표현하고, 간단한 애니메이션까지 표현 가능하게 된 것 때문
- 브라우저에 그림을 그리기 위해서는 canvas 요소를 사용하여 그림을 그릴 영역을 지정하고 실제 그림을 그리는 것은 자바스크립트를 사용
- 브라우저 지원 현황
HTML5 캔버스 그리기 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 사각형 그리기 </title>
<script type="text/javascript">
function rect()
{
var canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
context.strokeRect(10,10,200,200);
context.fillRect(220,10,200,200);
context.fillRect(430,10,200,200);
context.clearRect(500,50,100,100);
}
</script>
</head>
<body onload="rect();">
<canvas id="canvas" width="700" height="400" style="border:solid 1px #000000">canvas 사용하기</canvas>
</body>
</html>
예제를 연습해 봅시다
