canvas 태그를 이용한 그리기 튜토리얼 中 기본, 도형그리기
(https://developer.mozilla.org/en/Canvas_tutorial)
*** canvas 태그를 지원하는 chrome, FF 등의 브라우저로 테스트해 봐야 함 ***
1. 기본사용법
canvas 태그의 2d context를 얻어 fillStyle()을 이용하여 채우기 속성을 정하고 fillRect()로 사각형 그리기
<HTML>
<HEAD>
<script>
window.onload=function() {
var cnvs = document.getElementById("cnvs");
if (cnvs.getContext) {
var ctx = cnvs.getContext('2d');
// 좌측 상단 빨간 사각형
ctx.fillStyle = "rgb(255, 0, 0)";
ctx.fillRect(10, 10, 50, 50);
// 우측 하단 파란 사각형 (반투명)
ctx.fillStyle = "rgba(0, 0, 255, 0.5)";
ctx.fillRect(40, 40, 50, 50);
}
else alert('canvas를 지원하지 않는 브라우저입니다.');
}
</script>
</HEAD>
<BODY>
<canvas id="cnvs" width="100" height="100" style="background-color: ghostwhite; border: 1px solid black;"></canvas>
</BODY>
</HTML>
2-1. 사각형 그리기
fillRect() : 채움형태의 사각형 그리기
strokeRect() : 사각형 테두리 그리기
clearRect() : 사각형 범위만큼 삭제
가장 바깥에 채움형태의 빨간 사각형을 그리고, 내부에 작은 사각형 범위만큼을 지우고, 그 내부에 더 작은 사각형 테두리 그리기.
<HTML>
<HEAD>
<script>
window.onload=function() {
var cnvs = document.getElementById("cnvs");
if (cnvs.getContext) {
var ctx = cnvs.getContext('2d');
// 빨간색 채움형태 사각형
ctx.fillStyle = 'rgb(255, 0, 0)';
ctx.fillRect(10, 10, 80, 80);
// 사각형 범위 지우기
ctx.clearRect(20, 20, 60, 60);
// 사각형 테두리
ctx.strokeRect(30, 30, 40, 40);
}
else alert('canvas를 지원하지 않는 브라우저입니다.');
}
</script>
</HEAD>
<BODY>
<canvas id="cnvs" width="100" height="100" style="background-color: ghostwhite; border: 1px solid black;"></canvas>
</BODY>
</HTML>
2-2. drawing paths
drawing paths를 통해 도형을 그리려면 아래의 과정을 거쳐야 한다.
1) beginPath() : 새로운 도형을 그리기 위한 초기화
2) 어쩌구 저쩌구 해서 막 그린다
3) closePath() : 현재 위치에서 시작위치까지 직선을 그어 도형을 완성하는 함수. 도형이 이미 완성되어 있거나 위치가 하나 밖에 없다면 아무것도 하지 않음. (optional step)
4) stroke(and/or)fill : stroke는 도형의 테두리를 그리고, fill은 도형의 내부를 색으로 채움. (만약 fill method를 호출해서 도형을 그렸다면 자동으로 도형이 닫히므로 closePath()를 호출할 필요가 없다)
2-2-1. moveTo
- 아무것도 그리지 않으면서 위치만 이동시키는 함수.
moveTo, arc를 이용하여 얼굴 그리기
<HTML>
<HEAD>
<script>
window.onload=function() {
var cnvs = document.getElementById("cnvs");
if (cnvs.getContext) {
var ctx = cnvs.getContext('2d');
ctx.beginPath();
// (동그라미) 50:50을 기준으로 반지름 40짜리 원을 그림
ctx.arc(50,50,40,0,Math.PI*2,true);
ctx.moveTo(80,50); // 좌표이동
// (입) 50:50을 기준으로 반지름 30짜리 반원을 그림 (반시계 방향으로)
ctx.arc(50,50,30,0,Math.PI,false);
ctx.moveTo(40,35); // 좌표이동
// (왼쪽 눈) 35:35를 기준으로 반지름 4짜리 원을 그림
ctx.arc(35,35,4,0,Math.PI*2,true);
ctx.moveTo(70,35); // 좌표이동
// (오른쪽 눈) 65:35를 기준으로 반지름 4짜리 원을 그림
ctx.arc(65,35,4,0,Math.PI*2,true);
// 그린 도형들의 테두리를 그림
ctx.stroke();
}
else alert('canvas를 지원하지 않는 브라우저입니다.');
}
</script>
</HEAD>
<BODY>
<canvas id="cnvs" width="100" height="100" style="background-color: ghostwhite; border: 1px solid black;"></canvas>
</BODY>
</HTML>
2-2-2. lineTo
- 현재 위치에서 x:y까지의 직선을 그림
좌상단에 채움 삼각형, 우하단에 테두리 삼각형 그리기
<HTML>
<HEAD>
<script>
window.onload=function() {
var cnvs = document.getElementById("cnvs");
if (cnvs.getContext) {
var ctx = cnvs.getContext('2d');
// 그리기 시작
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(80,10);
ctx.lineTo(10,80);
// 도형 채우기
ctx.fill();
// 그리기 시작
ctx.beginPath();
ctx.moveTo(90,90);
ctx.lineTo(20,90);
ctx.lineTo(90,20);
// 시작점까지 선을 그어 도형닫기(완성)
ctx.closePath();
// 도형 테두리 그리기
ctx.stroke();
}
else alert('canvas를 지원하지 않는 브라우저입니다.');
}
</script>
</HEAD>
<BODY>
<canvas id="cnvs" width="100" height="100" style="background-color: ghostwhite; border: 1px solid black;"></canvas>
</BODY>
</HTML>
2-2-3. arc (x, y, radius, startAngle, endAngle, anticlockwise)
- 원을 그림
미키마우스(귀+얼굴+몸통...-_-;;;;) 그리기. 상상력이 좋아야 함...
<HTML>
<HEAD>
<script>
window.onload=function() {
var cnvs = document.getElementById("cnvs");
if (cnvs.getContext) {
var ctx = cnvs.getContext('2d');
// 왼쪽 귀
ctx.beginPath();
ctx.arc(25,25,15,0,Math.PI*2,true);
ctx.fill();
// 오른쪽 귀
ctx.beginPath();
ctx.arc(75,25,15,0,Math.PI*2,true);
ctx.stroke();
// 얼굴
ctx.beginPath();
ctx.arc(50,50,25,0,Math.PI*2,true);
ctx.fill();
// 몸통
ctx.beginPath();
ctx.arc(50,155,80,0,Math.PI*2,true);
ctx.stroke();
}
else alert('canvas를 지원하지 않는 브라우저입니다.');
}
</script>
</HEAD>
<BODY>
<canvas id="cnvs" width="100" height="100" style="background-color: ghostwhite; border: 1px solid black;"></canvas>
</BODY>
</HTML>
2-2-4. quadratic and bezier curves (이차곡선, 베지어 곡선)
- 이차곡선, 베지어 곡선 그리기
quadraticCurveTo(cp1x, cp1y, x, y);
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
2-2-4-1. 이차곡선 예제 (양쪽 뿔 그리는 부분이 이차곡선)
<HTML>
<HEAD>
<script>
window.onload=function() {
var cnvs = document.getElementById("cnvs");
if (cnvs.getContext) {
var ctx = cnvs.getContext('2d');
// 얼굴
ctx.beginPath();
ctx.arc(50,50,25,0,Math.PI*2,true);
ctx.stroke();
// 왼쪽뿔
ctx.beginPath();
ctx.moveTo(35,30);
ctx.quadraticCurveTo(24,18,25,0);
ctx.moveTo(30,34);
ctx.quadraticCurveTo(20,25,25,0);
ctx.stroke();
// 오른쪽 뿔
ctx.beginPath();
ctx.moveTo(65,30);
ctx.quadraticCurveTo(74,18,75,0);
ctx.moveTo(70,34);
ctx.quadraticCurveTo(78,25,75,0);
ctx.stroke();
// 눈
ctx.beginPath();
ctx.arc(40,45,3,0,Math.PI*2,true);
ctx.arc(60,45,3,0,Math.PI*2,true);
ctx.fill();
// 입
ctx.beginPath();
ctx.arc(50,55,10,0,Math.PI,false);
ctx.stroke();
}
else alert('canvas를 지원하지 않는 브라우저입니다.');
}
</script>
</HEAD>
<BODY>
<canvas id="cnvs" width="100" height="100" style="background-color: ghostwhite; border: 1px solid black;"></canvas>
</BODY>
</HTML>
2-2-4-2. 베지어 곡선 예제 (유사 나이키 마크. 귀찮아서 발로 했음...)
<HTML>
<HEAD>
<script>
window.onload=function() {
var cnvs = document.getElementById("cnvs");
if (cnvs.getContext) {
var ctx = cnvs.getContext('2d');
ctx.beginPath();
ctx.moveTo(25,35);
ctx.bezierCurveTo(10,85,20,85,90,10);
ctx.moveTo(25,35);
ctx.bezierCurveTo(20,65,30,65,90,10);
ctx.stroke();
}
else alert('canvas를 지원하지 않는 브라우저입니다.');
}
</script>
</HEAD>
<BODY>
<canvas id="cnvs" width="100" height="100" style="background-color: ghostwhite; border: 1px solid black;"></canvas>
</BODY>
</HTML>
2-2-5. 사각형 그리기
rect(x, y, w, h)
- fillRect(), strokeRect() 등이 있지만 기본적으로 사각형을 그리는 함수
그냥 의미없는 위치, 크기 증가...
<HTML>
<HEAD>
<script>
window.onload=function() {
var cnvs = document.getElementById("cnvs");
if (cnvs.getContext) {
var ctx = cnvs.getContext('2d');
var i=j=pos=size=1;
while (i<=20) {
pos = 10+((i-1)*3);
size = 10+i;
ctx.beginPath();
ctx.rect(pos,pos,size,size);
if (i%2==0) ctx.fill();
else ctx.stroke();
++i;
}
}
else alert('canvas를 지원하지 않는 브라우저입니다.');
}
</script>
</HEAD>
<BODY>
<canvas id="cnvs" width="100" height="100" style="background-color: ghostwhite; border: 1px solid black;"></canvas>
</BODY>
</HTML>
'HTML/CSS' 카테고리의 다른 글
| [HTML5] WebSocket 서버 순서도 (0) | 2010.12.02 |
|---|---|
| [HTML5] 2D Context tutorial (이미지) (0) | 2010.02.26 |
| [HTML5] CanvasRenderingContext2D 인터페이스 (0) | 2010.02.26 |
| [HTML5] canvas 의 width, height (0) | 2010.02.19 |
| [HTML5] canvas 브라우저 별 차이 (0) | 2010.02.19 |
