캔버스는 표준 HTML과 자바스크립트만으로 도형을 그릴 수 있도록 해주는 HTML5의 신기술중 하나이다. 이 요소를 사용하면 2차원의 비트맵 이미지 프로세싱이 가능하고 동적인 그래픽 렌더링을 자바 스크립트로 제어할 수 있다.
1. 사용 절차
1) HTML에서 <canvas>태그를 추가한다.
2) 캔버스 객체를 얻는다.
3) 캔버스 객체로 부터 렌더링 컨텍스트를 얻는다.
4) 컨텍스트 메소드와 속성을 사용하여 도형을 그린다.
2. <canvas/> 태그 추가
| <canvas id="example" width="400" height="300"/> |
3. 캔버스 객체 얻기
| canvas = document.getElementById("example"); |
4. 컨텍스트 얻기
| cont = canvas.getContext("2d"); |
5. 도형 그리기
| cont.fillStyle = "rgb(0,100,100)"; cont.fillRect(30,30,100,100); |
위의 과정에 대한 전체 소스는 아래와 같다.
<!doctype html>
<html>
<head>
<script>
window.onload = function(){
canvas = document.getElementById("example");
cont = canvas.getContext("2d");
cont.fillStyle = "rgb(0,100,100)";
cont.fillRect(30,30,100,100);
}
</script>
</head>
<body>
<canvas id="example" width="400" height="300"/>
</body>
</html>
[결과화면]
6. 색 지정 방법
HTML5에서는 세가지의 색 지정 방법을 지원한다.
1) #RRGGBB
기존 HTML에서 사용하던 방식 그대로 사용 가능.
2) rgb(rr,gg,bb)
rgb 지정 방식
3) rgba(RR,GG,BB,AA)
rgb 지정 방식에 alpha값을 추가하여 투명도를 조절할 수 있는 방식.
투명도 alpha값은 0.0~1.0까지의 범위. 1=불투명.
| cont.fillStyle = "#ff0000"; cont.fillStyle = "rgb(255,0,0)"; cont.fillStyle = rgba(255,0,0,0.5); |
[예제] 투명도 지정
<!doctype html>
<html>
<head>
<script>
window.onload = function(){
canvas = document.getElementById("example");
cont = canvas.getContext("2d");
cont.fillStyle = "rgba(0,100,100,0.5)";
cont.fillRect(30,30,200,200);
cont.fillRect(130,130,200,200);
}
</script>
</head>
<body>
<canvas id="example" width="400" height="300"/>
</body>
</html>
[결과화면]
댓글