HTML5 Canvas 태그로 그래픽 그리기

HTML5 Canvas 태그로 그래픽 그리기

HTML5 Canvas 태그는 웹 개발자들이 동적인 그래픽 이미지를 그리는 도구 중 하나입니다. 이 기술을 활용하면 웹 페이지에 그래픽을 그리고 애니메이션을 만들 수 있으며, 초보 개발자도 쉽게 활용할 수 있습니다. 이 글에서는 HTML5 Canvas 태그를 사용하여 그래픽을 그리는 기초적인 방법과 예제를 소개하겠습니다.

Canvas 태그 소개

Canvas는 HTML5에서 도입된 요소 중 하나로, 이미지, 그래픽, 애니메이션을 그릴 수 있는 빈 도화지와 같은 역할을 하고, 그래픽은 JavaScript를 사용하여 그려집니다.

Canvas 요소를 HTML에 추가하려면 다음과 같이 태그를 사용합니다:

<canvas id="myCanvas" width="500" height="300"></canvas>

• id: Canvas 요소를 나중에 JavaScript에서 식별하기 위한 고유 식별자입니다.
• width와 height: Canvas의 가로와 세로 크기를 지정합니다.

JavaScript를 사용한 그래픽 그리기

Canvas에 그래픽을 그리려면 JavaScript를 사용해야 합니다. 아래는 간단한 원을 그리는 예제입니다:

<canvas id="myCanvas" width="500" height="300"></canvas>
<script>
  // Canvas 요소 가져오기
  var canvas = document.getElementById("myCanvas");

  // 그림 그리기 컨텍스트 가져오기
  var context = canvas.getContext("2d");

  // 원 그리기
  context.beginPath();
  context.arc(100, 100, 50, 0, 2 * Math.PI);
  context.fillStyle = "blue";
  context.fill();
  context.closePath();
</script>

위 예제에서는 getContext("2d")를 사용하여 Canvas 그리기 컨텍스트를 얻고, beginPath()로 그리기 시작을 선언하고, arc()로 원을 그리고, fillStyle로 색상을 지정한 후 fill()로 원을 채웁니다.

다양한 그래픽 요소 그리기

Canvas를 사용하면 선, 사각형, 원, 이미지, 텍스트 등 다양한 그래픽 요소를 그릴 수 있습니다. 아래는 간단한 선, 사각형, 이미지, 텍스트를 그리는 예제입니다:

<canvas id="myCanvas" width="500" height="300"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");

  // 선 그리기
  context.beginPath();
  context.moveTo(50, 50);
  context.lineTo(150, 150);
  context.strokeStyle = "red";
  context.lineWidth = 2;
  context.stroke();

  // 사각형 그리기
  context.fillStyle = "green";
  context.fillRect(200, 50, 100, 100);

  // 이미지 그리기
  var img = new Image();
  img.src = "image.jpg";
  img.onload = function() {
    context.drawImage(img, 300, 50);
  };

  // 텍스트 그리기
  context.font = "20px Arial";
  context.fillStyle = "blue";
  context.fillText("Hello, Canvas!", 50, 250);
</script>

canvas로 그린 선, 사각형, 이미지, 텍스트

Canvas로 애니메이션 만들기

Canvas를 사용하면 애니메이션을 만들 수도 있습니다. 애니메이션을 만들려면 requestAnimationFrame() 함수를 사용하여 프레임마다 Canvas를 업데이트해야 합니다. 아래는 간단한 움직이는 원 애니메이션 예제입니다:

<canvas id="myCanvas" width="500" height="300"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  var x = 50;

  function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath();
    context.arc(x, 150, 50, 0, 2 * Math.PI);
    context.fillStyle = "blue";
    context.fill();
    context.closePath();

    x += 2; // 원을 오른쪽으로 이동
    if (x > canvas.width + 50) {
      x = -50; // Canvas 범위를 벗어나면 다시 시작
    }

    requestAnimationFrame(draw); // 다음 프레임 요청
  }

  draw(); // 애니메이션 시작
</script>

Canvas를 사용하여 그래픽을 그리고 애니메이션을 만들 수 있는 다양한 방법이 있으며, 초보 개발자도 단계별로 익혀나갈 수 있습니다. Canvas는 웹 개발에서 동적 그래픽을 구현하는 데 강력한 도구로 활용할 수 있습니다.