CSS 애니메이션
@keyframes
/* '%' 단위로 시간 진행에 따른 상태를 작성해주면 됩니다. */
@keyframes 애니메이션이름 {
0% { /* from 이라고 작성해도 됩니다.*/
CSS속성 : 속성값;
}
50% { /* 애니메이션 진행도에 따른 스타일을 설정합니다. */
/* 필요하다면 1부터 99까지도, 소수점까지도 모두 작성해도 됩니다.*/
CSS속성 : 속성값;
}
100% { /* to 라고 작성해도 됩니다.*/
CSS속성 : 속성값;
}
}
// 회전하는 키프레임 애니메이션
@keyframes rotate {
0% {
transform : rotate(0deg)
}
50% {
transform : rotate(180deg)
}
100% {
transform : rotate(360deg)
}
}
/* 시작 시점에선 0도, 50% 시점에선 180도, 완료 시점에선 360도 회전시키는 애니메이션입니다. */애니메이션 속성
animation-name : 애니메이션 중간상태를 지정하는 이름, @keyframes 블록에 작성
#logo {
animation-name : lotate; // animation: lotate 도 가능
}animation-duration : 한 싸이클의 애니메이션이 재생될 시간 지정. 지정해주지 않으면 기본값은 0
#logo {
animation-name : lotate;
animation-duration : 3s;
}
//
#logo {
animation : lotate 3s ;
}animation-delay: 애니메이션의 시작을 지연시킬 시간 지정
#logo {
animation-name : lotate;
animation-duration : 3s;
animation-delay : 3s;
}
//
#logo {
animation : lotate 3s 3s ;
}animation-direction: 애니메이션 재생방향 지정
#logo {
animation-name : lotate;
animation-duration : 3s;
animation-direction : alternate;
}
//
#logo {
animation : lotate 3s reverse ;
}
// normal, reverse, alternate, alternate-reverseanimation-iteration-count: 애니메이션 반복횟수 지정
#logo {
animation-name : lotate;
animation-duration : 3s;
animation-iteration-count : 3 ;
/* 애니메이션이 3번 반복 됩니다. */
}
//
#logo {
animation : lotate 3s infinite ;
/* 애니메이션이 무한 반복 됩니다. */
}animation-play-state: 애니메이션 재생상태. 멈추거나 다시 재생시킬 수 있음
#logo {
animation : lotate 3s pause ;
}
//
#logo {
animation-name : lotate;
animation-duration : 3s;
animation-play-state : pause ;
}
// 기본값 runninganimation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정
=> linear, ease, ease-in, ease-out, ease-in-out
animation-fill-mode: 애니메이션 재생 전 후의 상태 지정
=> none, forwards, backwards, both
@keyframe 중간값
: 키프레임을 설정하면서 주는 중간값은 애니메이션 재생시간이 기준임
#logo {
**animation-name : lotate;** /* lotate 라는 이름의 키프레임 애니메이션을 */
animation-duration : 3s; /* 3초 동안 재생하며, */
animation-iteration-count : infinite; /* 애니메이션을 무한 반복하고, */
animation-timing-function : linear; /* 선형으로 재생합니다. */
}
/* 아래와 같이 일괄 작성해도 동일하게 적용됩니다. */
#logo {
animation : **lotate** 3s infinite linear;
}Canvas
1단계 : id 작성
<canvas id="canvas">
캔버스를 지원하지 않는 브라우저에서는 캔버스 대신 태그 사이 내용이 표시됩니다.
</canvas>2단계: 자바스크립트로 element 선택
const canvas = document.querySelector("#canvas");3단계: 높이와 너비 설정 (방법 2가지)
//1. 태그속성으로 설정 - 픽셀로만 인식
<canvas id="canvas" width="500" height="500"></canvas>
// 500픽셀 * 500픽셀로 설정됩니다.
<canvas id="canvas" width="50vw" height="40vh"></canvas>
// vw, vh를 전달했지만 50픽셀 * 40픽셀로 설정됩니다.
// 2. DOM으로 설정 - 캔버스의 크기가 고정되어있지 않은 경우에 사용하기 좋음
canvas.width = 50vw;
canvas.height = 40vh;
// DOM으로 설정하면 50vw * 40vh 로 단위값을 지정해도 설정이 됩니다.
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 화면 크기에 맞춰서 설정해줄 수도 있습니다.
캔버스로 사각형 그리기
색칠된 사각형 그리기
- fillStyle 속성으로 사각형 내부를 색칠할 색상을 설정
ctx.fillStyle = 'blue'- fillRect 메소드를 사용해 사각형을 그려줍니다.
ctx.fillRext = (10, 10, 100, 50)
//전달 인자는 순서대로 x좌표, y좌표, 가로길이, 세로길이 입니다.선으로만 그리기
- lineWidth 속성으로 선의 굵기를, strokeStyle 속성으로 선의 색상을 설정
ctx.lineWidth = 5;
ctx.strokeStyle = "black";- strokeRect 메소드를 사용해 사각형을 그려줍니다.
ctx.strokeRect(10, 10, 100, 50)
//전달 인자는 이번에도 순서대로 x좌표, y좌표, 가로길이, 세로길이 입니다.
//위에서 그려준 색칠된 사각형 바로 위에 그려보세요.사각형으로 지우기
- clearRect 메소드로 지울 범위를 설정해줍니다.
ctx.clearRect( 20, 20, 80, 30)
// 전달 인자는 역시 동일합니다. 그려놓은 사각형 가운데 부분을 지워보세요.캔버스로 클릭이벤트 만들기
캔버스 좌표 구하기
클릭할 때 캔버스 위에서의 마우스 위치를 구하려면, 화면에서의 마우스 위치에서 화면에서의 캔버스 위치를 빼면 됩니다.
화면상 마우스 위치 구하기
- X좌표 : event.clientX
- Y좌표 : event.clientY
화면상 캔버스의 위치를 구하기
- X좌표 : ctx.canvas.offsetLeft
- Y좌표 : ctx.canvas.offsetTop
event.offsetX , event.offsetY 로 바로 구하기
canvas.onclick = function (event) {
const x = event.clientX - ctx.canvas.offsetLeft
const y = event.clientY - ctx.canvas.offsetTop
// 구한 좌표를 이용해서 사각형을 그리는 코드를 작성해보겠습니다.
ctx.fillRect(x - 15, y - 15, 30, 30);
// 클릭할 때마다 30픽셀*30픽셀 크기의 사각형을 그리도록 하려고 합니다.
// 이 때, x, y를 그대로 전달하면 해당 좌표부터 사각형이 시작되어 어색한 느낌을 줍니다.
// 클릭한 위치를 사각형의 정중앙이 되게 하려면 사각형크기/2 한 만큼 좌표에서 빼주면 됩니다.
// 따라서 x - 15, y - 15 를 전달합니다.
}결과물
index.html
<!DOCTYPE html> <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> </head>
index.js
const canvas = document.querySelector("#canvas"); const ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; // canvas.onclick = function (event) { const x = event.clientX - ctx.canvas.offsetLeft; const y = event.clientY - ctx.canvas.offsetTop; // ctx.fillRect(x - 15, y - 15, 30, 30); };
Chart.js
여러 종류의 차트를 만드는데 사용하는 라이브러리
설치
npm install chart.js차트만들기
<canvas id="popChart" width="600" height="400"></canvas>DOM으로 인스턴스화 시키기
let popCanvas = document.getElementById("popChart");
let popCanvas = document.getElementById("popChart").getContext("2d");파라미터 Constructor에 전달
let barChart = new Chart(popCanvas, {
type: 'bar',
data: {
labels: ["China", "India", "United States", "Indonesia", "Brazil", "Pakistan", "Nigeria", "Bangladesh", "Russia", "Japan"],
datasets: [{
label: 'Population',
data: [1379302771, 1281935911, 326625791, 260580739, 207353391, 204924861, 190632261, 157826578, 142257519, 126451398],
backgroundColor: [
'rgba(255, 99, 132, 0.6)',
'rgba(54, 162, 235, 0.6)',
'rgba(255, 206, 86, 0.6)',
'rgba(75, 192, 192, 0.6)',
'rgba(153, 102, 255, 0.6)',
'rgba(255, 159, 64, 0.6)',
'rgba(255, 99, 132, 0.6)',
'rgba(54, 162, 235, 0.6)',
'rgba(255, 206, 86, 0.6)',
'rgba(75, 192, 192, 0.6)',
'rgba(153, 102, 255, 0.6)'
]
}]
}
});차트 유형
type키를 통해 지정 가능: line, bar, radar, polarArea, pie, doughnut, bubble
oneThing