티스토리 뷰
CSS 애니메이션
@keyframes 키워드를 사용하여 시간 순서대로 정밀하게 짜여진 애니메이션을 만들 수 있음
① @keyframes 블록 만들기
@keyframes 애니메이션-이름 {
0% { /* 또는 from */
속성: 속성값
}
50% { /* 1~99% +소수점 사용 // 중간값 */
속성: 속성값
}
100% { /* 또는 to */
속성: 속성값
}
}중간값: 애니메이션 재생 시간 기준
② 셀렉터에 animation 속성 주기
animation 속성에 띄어쓰기로 여러 속성을 설정할 수 있음
필수
animation-name
: 애니메이션 이름. 보통 중간 상태를 알 수 있는 이름으로 지정
anmation-duration
: 한 싸이클의 애니메이션이 재생될 시간 지정
animation-delay
: 반복 시 애니메이션 시작을 지연시킬 시간 지정
animation-direction
: 애니메이션 재생 방향 지정
(normal: 기본값. 순방향, reverse: 역방향, alternate: 순방향-역방향 반복, alternate-reverse: 역방향-순방향 반복)
animation-iteration-count
: 애니메이션 반복 횟수 지정
animation-play-state
: 애니메이션 재생 상태
(running: 기본값, pause: 정지. 보통 이벤트로 재생 상태를 변경시킬 때 사용)
animation-timing-function
: 중간 상태들의 전환을 어떤 시간 간격으로 진행할 지 지정
(ease: 기본값, liner: 끊김 없이, ease-in, ease-out, ease-in-out)
anmation-fill-mode
: 애니메이션 재생 전후 상태 지정(재생 중이 아닌 경우)
(none: 기본값. 요소의 스타일 유지, forwards: 마지막 키프레임-100%, to- 스타일 유지, backwards: 첫 번째 키프레임-0%, from- 스타일 유지, both: 재생 전 첫 번째 키프레임, 재생 후 마지막 키프레임 스타일)
@keyframes lotate {
0% {
transform : rotate(0deg)
}
50% {
transform : rotate(180deg)
}
100% {
transform : rotate(360deg)
}
}
/* 시작 시점에선 0도, 50% 시점에선 180도, 완료 시점에선 360도 회전시키는 애니메이션#logo {
animation : lotate 3s infinite ;
/* 애니메이션 무한 반복 */
}
#logo {
animation-name : lotate;
animation-duration : 3s;
animation-iteration-count : 3 ;
/* 애니메이션 3번 반복 */
}Canvas
html <canvas>와 자바스크립트를 이용하여 다양한 그래픽 요소를 만들 수 있음
- 도형 그리기
- 데이터 시각화
- 애니메이션
- 웹 게임 등
① html 파일에 canvas 태그 생성
- DOM으로 조작해야하기 때문에 html에 canvas 생성 시 id를 지정해줄 것
- 캔버스를 지원하지 않는 브라우저에서는 태그 사이 내용이 표시 됨
<canvas id="canvas">
캔버스를 지원하지 않는 브라우저에서 표시될 내용
</canvas>
② 자바스크립트에서 캔버스 선택
const canvas = document.querySelector("#canvas")
③ 너비 설정하기
- 설정하지 않는다면 기본값 300px * 150px
- html에서 지정하면 px값으로만 지정할 수 있음
<canvas id="canvas" width="50" height="500"> </canvas>
- DOM으로 설정. 상대단위를 사용할 수 있기 때문에 캔버스의 크기가 고정되어 있지 않은 경우 사용
canvas.style.width = '50vw';
canvas.style.height = '50vh';
canvas.width = window.innerWidth * 0.5; //50vw 와 같음
canvas.height = window.innerHeight * 0.4; //40vw 와 같음
④ 돔 조작
캔버스의 드로잉 컨텍스트를 반환
const ctx = canvas.getContext("2d");ctx.fillStyle 내부 색상 설정
ctx.fillRect=(시작x, 시작y, 가로길이, 세로길이) 좌표만큼 색 채우기
ctx.linerWidth: 선 굵기
ctx.strokeStyle: 선 색상
ctx.strokeRect=(시작x, 시작y, 가로길이, 세로길이) 좌표의 테두리 그리기
ctx.clearRect=(시작x, 시작y, 가로길이, 세로길이) 크기만큼 지우기
⑤ 컨버스 위의 마우스 위치 구하기
1. 화면 위 마우스 위치에서 화면 위 캔버스 위치 빼주기
화면 위 마우스 위치
x좌표: event.clientX
y좌표: event.clientY
화면 위 캔버스 위치
ctx.canvas.offsetLeft
ctx.canvas.offsetTop
2. event.offsetX, event.offsetY로 위치 바로 구하기
chart.js 라이브러리 사용하기
1. 설치
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" ></script>
</head>
2. canvas 태그 생성
<canvas id="myChart" width="600" height="400"></canvas>
3. 인스턴스화 시키기
let myCanvas = document.getElementById("myChart").getContext("2d");
4. Chart에 데이터 전달하기
const labels = [
'January',
'February',
'March',
'April',
'May',
'June',
];
const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45],
}]
};
const config = {
type: 'line',
data: data
};
//이 부분이 chart constructor 입니다.
const myChart = new Chart(
myCanvas,
config
);Chart의 두 번째 인자 config의 type으로 차트의 타입을 설정해 줄 수 있음
- line
- bar
- radar
- polarArea
- pie
- doughnut
- bubble
data 키로 실제 데이터 담기
backgroundColor 키로 막대들의 색상을 다르게 지정해 줄 수 있음(기본값 rgba(0,0,0,0.1))
2023.01.17
코스 S4U2 애니메이션, 캔버스
'코드스테이츠(SEB_FE_42)' 카테고리의 다른 글
| [React] Webpack (0) | 2023.01.19 |
|---|---|
| [React] 번들링, 웹팩 (0) | 2023.01.18 |
| [HTML] 브라우저 렌더링 (0) | 2023.01.14 |
| [HTML/CSS] 브라우저, 반응형 웹 (0) | 2023.01.14 |
| [자료구조/알고리즘] Tree, Graph (0) | 2023.01.13 |