Canvas
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Canvas tutorial</title>
<script type="application/javascript">
function draw() {
const canvas = document.querySelector('#canvas');
// canvas 크기
canvas.width = innerWidth;
canvas.height = innerHeight;
if (canvas.getContext) {
const ctx = canvas.getContext('2d');
// Rect를 통해 사각형 크기 지정하고 Style로 색상
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 50);
// 테두리선 그리기
ctx.lineWidth = 5;
ctx.strokeStyle = 'black';
ctx.strokeRect(10, 10, 100, 50);
// 내부 clearRect만큼 지우기
ctx.clearRect(20, 20, 80, 30);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas"></canvas>
</body>
</html>CSS 애니메이션
-
@keyframes를 이용한 css 애니메이션 -
animation 속성
- animation-duration : 애니메이션이 재생될 시간 설정
- animation-delay : 애니메이션 시작 지연 시간 설정
- animation-direction : 애니메이션 재생 방향 설정
- animation-iteration-count : 애니메이션이 반복 횟수 설정
2022.08.24 회고
오늘 한 일
- Canvas, CSS 애니메이션, Chart.js
- React 심화
- 1차 과제 마무리
느낀 점
- 과제를 팀으로 진행하다보니 팀원들에게 배울 것이 많음.
- 조급해하지 말고 TIL을 꾸준히 작성할 것.
늘 호기심을 갖고, 새로운 것에 도전할 것.