HTML5 - [11] Canvas arc(원) arcTo(원호) 베지에곡선

HTML5 - [11] Canvas arc(원) arcTo(원호) 베지에곡선

(1) 원/원호 그리기

arc(x, y, 반지름, 시작각도, 종료각도, 그리는방향)

• 각도는 라디안으로 표시 → 각도*Math.PI/180
• 그리는 방향: true → 시계 반대 방향, false → 시계 방향

(2) 부채꼴 그리기

moveTo(x,y) → arc(…) → closePath()의 순서대로 사용

• moveTo(x, y) → 부채꼴의 중심의 좌표 지정
• closePath() → 중심의 좌표와 호의 양 끝점을 자동으로 연결시킴

(3) 직선과 접하는 원호 그리기

moveTo(x,y) → arc(보조점x, 보조점y, 종료점x, 종료점y, 반지름)

(4) 베지에 곡선

n개의 점으로부터 얻어지는 (n-1)차 곡선

2차 베지에 곡선

• quadraticCurveTo(제어점x, 제어점y, 종료점x, 종료점y)
• 2차/3차 베지에 곡선 모두 시작점은 moveTo(x,y)로 지정

3차 베지에 곡선

• bezierCurveTo(제어점x1, 제어점y1, 제어점x2, 제어점y2, 종료점x, 종료점y)

(5) 채우기 색상 및 투명도 지정

fillStyle 속성 → 채우기 색상 또는 스타일 지정

globalAlpha 속성 → 색상의 투명도(0.0~1.0) 지정

(6) 와인딩 규칙

주어진 지점이 닫힌 곡선의 내부에 있는 지를 판단하는 방법

• 짝-홀 와인딩, 넌제로 와인딩

IE 11 이상에서는 와인딩 방식 지정이 가능 → msFillRule = "evenodd" | "nonzero"

(7) 그라데이션 스타일 지정

• context.beginPath();
• var 변수 = context.createLinearGradient(x1,y1,x2,y2);    //선형의 경우
• var 변수 = context.createRadialGradient(x1,y1,r1,x2,y2,r2);    //방사형의 경우
• 변수 = addColorStop(0.0, 색상);    //시작점의 색상 지정
• [ 변수 = addColorStop(오프셋, 색상); ]*    //중간점의 색상 지정(오프셋: 0.x)
• 변수 = addColorStop(1.0, 색상);    //끝점의 색상 지정
• context.fillStyle = 변수;

• 선형 그라데이션의 경우 시작점(x1,y1)과 끝점(x2,y2)의 위치에 따라 그라데이션의 진행 방향이 달라짐

(8) 이미지 패턴 스타일 지정

• var 변수1 = new Image();
• 변수1.src = '이미지 주소‘;
• 변수1.onload = function () { //이미지가 로드될 때까지 기다렸다 처리함
• var 변수2 = context.createPattern(변수1, 반복형식);
• context.fillStyle = 변수;
• }

• 반복형식을 지정하는 값 → no-repeat, repeat-x, repeat-y, repeat

(9) 그림자 스타일 지정

• context.shadowOffsetX = 값; //그림자의 X축 오프셋 지정
• context.shadowOffsetY = 값; //그림자의 Y축 오프셋 지정
• context.shadowColor = 색상; //그림자의 색상 지정
• context.shadowBlur = 값; //그림자의 흐림 정도 지정