Canvas 태그 사용
- html body에서 id가 canvas인 canvas태그를 생성한다.
- canvas태그내에 글씨를 삽입함으로써, canvas를 지원하지 않는 브라우저에 대해서 대응할수 있도록 한다.
예시 )
<canvas id="canvas" width="600" height="300">
Canvas를 지원하지 않는 브라우저입니다.
</canvas>
드로잉 컨텍스트 생성
- script에서 getElementById를 사용하여 드로잉 컨텍스트를 생성한다.
예시 )
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
선 / 도형 그리기
- 아래와 같은 순서로 진행하여 선/ 도형 그리기를 진행한다.
1. 패스 그리기 시작
- beginPath();
2. 서브 패스 그리기
2.1 직선을 그리는 메소드 (line)
- moveTo(x, y);
- lineTo(x, y);
2.2 사각형을 그리는 메소드 (rect)
- rect(x, y, 사각형의 폭, 사각형의 높이 );
2.3 원 또는 원호를 그리는 메소드 (arc)
- arc( x, y, 반지름, 시작각도, 종료각도, 시계/반시계 );
3. 패스 그리기 닫기
- closePath();
4. 그리기/채우기
- stroke(); or fill();
사각형 그리기
- 기본적으로 사각형을 그리기는 함수가 제공되어 있다.
strokeRect ( x, y, 사각형의 폭, 사각형의 높이 );
fillRect (x, y, 사각형의 폭, 사각형의 높이 );
clearRect ( x, y, 사각형의 폭, 사각형의 높이 );
스타일 지정
- stroke()나 fill()을 호출하기 전에 context에 스타일을 지정한다.
예시 )
context.fillStyle = "red";
context.strokeStyle = "#114255";
'프로그래밍 > HTML5' 카테고리의 다른 글
| [HTML5] Form 다중 submit (0) | 2021.01.12 |
|---|---|
| [HTML5] Audio & Video (2) | 2012.08.28 |