[javascript] Canvas와 자바스크립트를 이용한 파도 효과 구현하기

01 Dec 2023

javascript

파도 효과는 웹 페이지에 동적이고 생동감 있는 효과를 주는데 사용되는 한 가지 예시입니다. 이번 포스트에서는 Canvas와 자바스크립트를 사용하여 파도 효과를 구현하는 방법을 알아보겠습니다.

Canvas란?

Canvas는 HTML5에서 도입된 웹 그래픽을 위한 요소입니다. Canvas를 사용하면 자바스크립트를 이용하여 동적으로 그림을 그릴 수 있습니다. Canvas는 2D 및 3D 그래픽 그리기에 사용될 수 있으며, 애니메이션 및 그래픽 효과를 만드는 데에 특히 유용합니다.

파도 효과 구현하기

HTML 파일에서 Canvas 요소를 생성합니다.
```
<canvas id="canvas"></canvas>
```

자바스크립트 파일에서 Canvas에 대한 참조를 가져옵니다.

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

Canvas의 크기를 설정합니다.

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

파도를 그리는 함수를 만듭니다.

function drawWave() {
  // 파도 그리는 로직을 작성합니다.
}

애니메이션 프레임을 사용하여 파도를 그리는 함수를 반복 호출합니다.

function animate() {
  requestAnimationFrame(animate);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawWave();
}

animate();

drawWave 함수에서 파도를 그리는 로직을 작성합니다.

function drawWave() {
  ctx.beginPath();
  ctx.moveTo(0, canvas.height / 2);
  for (let x = 0; x < canvas.width; x++) {
    const y = Math.sin(x * 0.01) * 50 + canvas.height / 2;
    ctx.lineTo(x, y);
  }
  ctx.strokeStyle = 'blue';
  ctx.lineWidth = 2;
  ctx.stroke();
}

웹 페이지를 열어 파도 효과를 확인합니다.

이제 웹 페이지를 열어 파도 효과가 적용된 Canvas를 확인할 수 있습니다. 파도의 모양이나 색상 등을 수정하여 원하는 효과를 만들어보세요.

결론

이번 포스트에서는 Canvas와 자바스크립트를 사용하여 파도 효과를 구현하는 방법을 알아보았습니다. Canvas는 웹 그래픽을 그리는 데에 매우 유용하며, 다양한 효과를 구현하는 데에 활용될 수 있습니다. 파도 효과 외에도 다른 동적인 효과를 구현해보며 웹 페이지를 더욱 흥미롭게 만들어보세요.

Canvas란?

파도 효과 구현하기

결론

참고 자료