| sitelink1 | http://blog.naver.com/shadowbug/220741277430 |
|---|---|
| sitelink2 | |
| sitelink3 | |
| sitelink4 | |
| extra_vars5 | |
| extra_vars6 |
선과 삼각형, 다각형들을 그리기 위해서는 Path를 이용하여 그려야한다.
주요 Path 함수
|
|
설명 |
|
beginPath() |
패스를 연다. |
|
closePath() |
패스를 닫는다. 이 함수를 사용할 경우, moveTo로 설정한 점으로 연결을 시킨다. 처음 점과 연결하여 닫기 싫을 경우 사용하지 않으면 된다. |
|
moveTo(x, y) |
그리기의 시작 지점을 설정한다. |
|
lineTo(x, y) |
선이 그려지는 끝 부분을 설정한다. 계속 호출할 경우 moveTo가 이전 lineTo로 호출되며 선이 계속 이어진 것과 같은 효과가 난다. |
javascript
-
function draw(target) {
-
var canvas = document.getElementById("draw");
-
-
// 지원 여부 체크
-
if (canvas.getContext) {
-
// HTML5에서 canvas를 지원시
-
-
// 그리기 오브젝트를 받음
-
var ctx = canvas.getContext('2d');
-
-
ctx.beginPath();
-
ctx.moveTo(75, 50);
-
ctx.lineTo(100, 75);
-
ctx.lineTo(100, 25);
-
ctx.closePath();
-
ctx.fill();
-
}
-
}
결과

댓글 0
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 31 | div와 span의 차이점 (from Bing) | 황제낙엽 | 2023.06.16 | 273 |
| 30 | iframe 다루기 | 황제낙엽 | 2017.02.27 | 1999 |
| 29 |
Multiple Canvas Layer 예제
| 황제낙엽 | 2016.08.23 | 246 |
| 28 | Canvas 개요 | 황제낙엽 | 2016.08.22 | 311 |
| 27 |
Canvas 확대
| 황제낙엽 | 2016.08.22 | 250 |
| 26 | Canvas setTransform 함수 | 황제낙엽 | 2016.08.22 | 252 |
| 25 |
Canvas 회전
| 황제낙엽 | 2016.08.22 | 296 |
| 24 |
Canvas 영역 선택
| 황제낙엽 | 2016.08.22 | 249 |
| 23 | Canvas CanvasRenderingContext2D Context 속성 | 황제낙엽 | 2016.08.22 | 233 |
| 22 | Canvas 도형의 클릭 이벤트 처리 | 황제낙엽 | 2016.08.22 | 512 |
| 21 | Canvas 이미지 추출 | 황제낙엽 | 2016.08.22 | 325 |
| 20 | Canvas 더블버퍼링 | 황제낙엽 | 2016.08.22 | 441 |
| 19 |
Canvas 비트맵 그리기
| 황제낙엽 | 2016.08.22 | 265 |
| 18 |
Canvas 그라디언트 그리기
| 황제낙엽 | 2016.08.22 | 248 |
| 17 |
Canvas 텍스트 그리기
| 황제낙엽 | 2016.08.22 | 246 |
| 16 |
Canvas 곡선 그리기
| 황제낙엽 | 2016.08.22 | 657 |
| » |
Canvas 다각형 그리기
| 황제낙엽 | 2016.08.22 | 345 |
| 14 |
Canvas 사각형 그리기
| 황제낙엽 | 2016.08.22 | 268 |
| 13 |
Canvas 시작하기
| 황제낙엽 | 2016.08.22 | 259 |
| 12 | Vector Markup Language | 황제낙엽 | 2012.12.20 | 234 |
