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.
HTML5 - [9] 고급기능 [다단 레이아웃, 변형, 트랜지션, 마키, 애니메이션, 미디어]
HTML5 - [9] 고급기능 [다단 레이아웃, 변형, 트랜지션, 마키, 애니메이션, 미디어](1) 다단 레이아웃 다단 레이아웃 속성 설명 columns column-width 단의 폭 지정 column-count 단의 개수 지정 column-gap 단과 단 사이의 간격 지정 column-rule column-rule-color 단과 단 사이의 구분선의 색상 지정 column-rule-width 단 구분선의 굵기 지정 column-rule-style 단 구분선의 형태(스타일) 지정 column-span 다단을 구성할 때 해당 요소가 얼마나 많은 단을 차지하는 지를 지정 column-fill 단 길이의 차이를 최소화할지 여부를 지정 (2) 변형 변형 속성 설명 transform: translate() 요소..
2017. 8. 17.