| 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
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 | 
|---|---|---|---|---|
| 68 | Canvas 도형의 클릭 이벤트 처리 | 황제낙엽 | 2016.08.22 | 514 | 
| 67 | Canvas 이미지 추출 | 황제낙엽 | 2016.08.22 | 327 | 
| 66 | Canvas 더블버퍼링 | 황제낙엽 | 2016.08.22 | 441 | 
| 65 | Canvas 비트맵 그리기   | 황제낙엽 | 2016.08.22 | 265 | 
| 64 | Canvas 그라디언트 그리기   | 황제낙엽 | 2016.08.22 | 249 | 
| 63 | Canvas 텍스트 그리기   | 황제낙엽 | 2016.08.22 | 247 | 
| 62 | Canvas 곡선 그리기   | 황제낙엽 | 2016.08.22 | 658 | 
| » | Canvas 다각형 그리기   | 황제낙엽 | 2016.08.22 | 345 | 
| 60 | Canvas 사각형 그리기   | 황제낙엽 | 2016.08.22 | 269 | 
| 59 | Canvas 시작하기   | 황제낙엽 | 2016.08.22 | 260 | 
| 58 | HTML5 개발을 도와주는 도구들 | 황제낙엽 | 2014.04.04 | 209 | 
| 57 | encoding, charset, code page, UTF-8, UNICODE ...   | 황제낙엽 | 2013.08.07 | 1007 | 
| 56 | document.domain (from mozilla.org) | 황제낙엽 | 2013.03.13 | 814 | 
| 55 | 우리은행 웹 접근성 가이드   | 황제낙엽 | 2013.03.08 | 268 | 
| 54 | 모든 브라우저에서 동작하는 opacity 설정 코드 | 황제낙엽 | 2013.02.14 | 249 | 
| 53 | DXImageTransform.Microsoft.AlphaImageLoader 와 file dialog | 황제낙엽 | 2013.01.28 | 397 | 
| 52 | Gradient 와 Background-Image 동시 적용 방안 | 황제낙엽 | 2013.01.11 | 387 | 
| 51 | 그라디언트와 다중 배경 (gradient)   | 황제낙엽 | 2013.01.11 | 279 | 
| 50 | CSS Gradient Background Maker   | 황제낙엽 | 2013.01.11 | 265 | 
| 49 | Radius, Gradient, Padding | 황제낙엽 | 2013.01.11 | 267 | 
 
							