336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
기본적으로 선을 그으려면
요게 기본이다.
여기에다 lineTo로 라인을 하나 더 그리면 이전 좌표에 연결해서 선이 그려진다.
ctx.stroke(); 전에 ctx.closePath(); 를 하면 도형 그리기가 종료되고, 선 긋기가 종료된 시점과 선 긋기가 최초로 시작된 지점이 연결된다.
ctx.fill();을 사용하면 도형의 색을 채울 수 있고, ctx.stroke();를 사용하면 안이 채워지지는 않고 테두리만 그려진 삼각형이 완성된다.
한 Canvas 안에 선 두개 이상을 그릴때는 moveTo() 메소드가 유용하다.
moveTo()를 이용하면 원하는 좌표에서 그리기를 다시 시작할 수 있다. 마치 연필로 그림을 그릴 때 펜을 종이에서 뗐다가 다른 곳으로 이동시킬때와 같다. 이걸 안써준다면 선이 이어지게 된다.
결과 화면
2차 베지어 곡선과 3차 베지어 곡선은 곡선 패스를 컨트롤할 수 있는 컨트롤 포인트의 개수가 다를뿐이다. 당연히 포인트가 하나 더 많은 3차 베지어 곡선이 더 디테일한 그림을 그릴 수있다.
베지어 곡선을 연달아 사용하면 복잡한 그림을 그릴 수 있다.
요소 합성하기
결과 화면
| ctx.beginPath(); //새로운 도형을 그림 ctx.lineTo(10, 10); //선이 시작할 좌표 설정 ctx.lineTo(100, 100); //선이 끝나는 곳 좌표 설정 ctx.stroke(); //선 긋기 |
여기에다 lineTo로 라인을 하나 더 그리면 이전 좌표에 연결해서 선이 그려진다.
ctx.stroke(); 전에 ctx.closePath(); 를 하면 도형 그리기가 종료되고, 선 긋기가 종료된 시점과 선 긋기가 최초로 시작된 지점이 연결된다.
ctx.fill();을 사용하면 도형의 색을 채울 수 있고, ctx.stroke();를 사용하면 안이 채워지지는 않고 테두리만 그려진 삼각형이 완성된다.
한 Canvas 안에 선 두개 이상을 그릴때는 moveTo() 메소드가 유용하다.
| <!DOCTYPE HTML> <html> <head> <title>Canvas 공부</title> <script type="text/javascript"> var make_canvas = function(){ //페이지가 열리자마자 호출될 make_canvas 함수 var exam = document.getElementById('exam'); var ctx = exam.getContext('2d'); ctx.beginPath(); //새로운 도형을 그림 //첫번째 선 ctx.lineTo(10, 10); ctx.lineTo(100, 160); ctx.stroke(); //두번째 선 ctx.moveTo(30, 10); //두번째 선이 시작할 좌표 ctx.lineTo(130, 160); ctx.stroke(); ctx.closePath(); //도형 그리기를 종료 }; </script> <style type = "text/css"> #exam { border : 1px solid #000000; } </style> </head> <body onload = "make_canvas();"> <canvas id = "exam" width = "200" height = "200"></canvas> </body> </html> |
결과 화면
선에 스타일도 줄 수 있는데
ctx.lineWidth = 15 //선 두께 지정 (선 두께를 따로 설정해 주지 않으면 기본 두께는 1.0이다.
ctx.lineCap = 'round' //선의 끝 부분을 둥글게. lineCap에서 사용할 수 있는 스타일은 butt(기본), round, square가 있다.
ctx.strokeStyle = "#000000"; //선의 색상
ctx.lineJoin = "round" //선이 꺾이는 부분의 모양. round, bevel(뚝 잘린 것 같이), miter(뾰족하게)
| ctx.quadraticCurveTo(cpx, cpy, x, y); //2차 베지어 곡선 ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); //3차 베지어 곡선 |
베지어 곡선을 연달아 사용하면 복잡한 그림을 그릴 수 있다.
요소 합성하기
| <!DOCTYPE HTML> <html> <head> <title>Canvas 공부</title> <script type="text/javascript"> var make_canvas = function(){ //페이지가 열리자마자 호출될 make_canvas 함수 var exam = document.getElementById('exam'); var ctx = exam.getContext('2d'); //빨간색 사각형 그리기 ctx.fillStyle = "#ff0000"; ctx.fillRect(15, 15, 100, 100); //합성 ctx.globalCompositeOperation = "source-over";
//파란색 동그라미 그리기 ctx.fillStyle = "#0000ff"; ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI*2, false); ctx.fill(); }; </script> <style type = "text/css"> #exam { border : 1px solid #000000; } </style> </head> <body onload = "make_canvas();"> <canvas id = "exam" width = "200" height = "200"></canvas> </body> </html> |
결과 화면
'공부 > HTML5' 카테고리의 다른 글
| 웹 폼 (0) | 2011.11.05 |
|---|---|
| 그림자와 그라데이션 구현하기 (0) | 2011.11.05 |
| Canvas2 사각형 그리기 (0) | 2011.11.04 |
| Canvas1 그림 그리기 준비 (0) | 2011.11.04 |
| 시멘틱 웹 [semantic web] (0) | 2011.11.04 |
댓글