1분코딩님 유투브 캔버스 라이브강좌 들으면서 이래저래 조작해서 만들어보았습니다!
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
canvas {
background: #243c74;
}
</style>
</head>
<body>
<h1>Interaction</h1>
<canvas class="canvas" width="600" height="400"></canvas>
<script>
const canvas = document.querySelector('.canvas');
const context = canvas.getContext('2d');
const drops = [];
const mousePos = { x: 0, y: 0 };
let selectedBox; // 클릭된 box를 넣어놓은 변수
context.font = 'bold 30px sans-serif';
class Drop {
constructor(index, x, y, speed, length) {
this.index = index;
this.x = x;
this.y = y;
this.speed = speed;
this.length = length;
this.draw();
}
draw() {
context.beginPath();
context.strokeStyle = '#dfdfdf';
context.moveTo(this.x, this.y);
context.lineTo(this.x, this.y + this.length);
context.stroke();
context.closePath();
}
}
function render() {
context.clearRect(0, 0, canvas.width, canvas.height);
drops.forEach((drop) => {
drop.y += drop.speed;
if (drop.y > canvas.height) {
drop.y = 0;
drop.x = Math.random() * canvas.width;
drop.speed = Math.random() * 3 + 1;
drop.length = Math.random() * 5 + 2;
}
drop.draw();
});
requestAnimationFrame(render); //반복
//console.log(drops);
}
let tempX, tempY, tempSpeed, tempLength;
for (let i = 0; i < 200; i++) {
tempX = Math.random() * canvas.width;
tempY = Math.random() * canvas.height;
tempSpeed = Math.random() * 3 + 1;
tempLength = Math.random() * 5 + 2;
drops.push(new Drop(i, tempX, tempY, tempSpeed, tempLength));
}
render();
</script>
</body>
</html>
See the Pen wvGamZd by alice (@jyynkr92) on CodePen.
'자바스크립트' 카테고리의 다른 글
| [Javascript] 브라우저 저장소 (2) | 2021.05.27 |
|---|---|
| [Canvas] text 랜덤으로 나오다가 하나씩 나타나도록 하기 (0) | 2020.08.10 |
| [JavaScript공부 - 12] Logical operators(논리 연산자) (0) | 2019.02.27 |
| [JavaScript공부 - 11] 조건 연산자 : if, '?' (0) | 2019.02.18 |
| [JavaScript공부 - 10] Interaction(상호작용):alert, prompt. comfirm (0) | 2019.02.11 |
댓글