HTML5 - [12]이동,회전, 확대/축소, 텍스트, 애니메이션
HTML5 - [12]이동,회전, 확대/축소, 텍스트, 애니메이션 정리하기 (1) 도형 합성 globalCompositeOperation 속성 → 도형이 겹쳐지는 부분에 대한 처리 방식을 지정 source-atop, source-in, source-out, source-over, destination-atop, destination-in, destination-out, destination-over, lighter, copy, xor, darker (2) 좌표 공간의 변환 translate(x,y) → 좌표 공간의 시작점을 (x,y)로 이동 rotate(각도) → 좌표 공간을 시계 방향으로 주어진 각도만큼 회전 scale(x, y) → 좌표 공간을 수평/수직 방향으로 확대/축소 사용자 정의 변환 → tr..
2017. 8. 18.
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차 베지에 곡선 q..
2017. 8. 18.
