<!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>
@keyframes
를 이용한 css 애니메이션
animation 속성
- animation-duration : 애니메이션이 재생될 시간 설정
- animation-delay : 애니메이션 시작 지연 시간 설정
- animation-direction : 애니메이션 재생 방향 설정
- animation-iteration-count : 애니메이션이 반복 횟수 설정
오늘 한 일
느낀 점