여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. HTML Canvas - 사각형
회원가입
로그인이 되지 않았습니다.
회원가입

HTML Canvas – 사각형

카테고리: 공부 » 풀스택 » 프론트엔드 » 
17시간전 작성

HTML Canvas 사각형

HTML Canvas에서는 다양한 방법으로 사각형을 그릴 수 있다. 이 문서에서는 여러 유형의 Canvas 사각형을 만드는 방법을 설명한다.

사각형 그리기 메서드

Canvas에서는 세 가지 유형의 사각형을 그릴 수 있는 내장 함수를 제공한다.

  • fillRect(x, y, width, height) – 채워진 사각형을 그린다
  • strokeRect(x, y, width, height) – 테두리만 있는 사각형을 그린다
  • clearRect(x, y, width, height) – 사각형 영역을 지운다(투명하게 만든다)

다음 매개변수는 모든 사각형 메서드에 공통으로 사용된다.

매개변수 설명
x 사각형 왼쪽 상단 모서리의 x 좌표
y 사각형 왼쪽 상단 모서리의 y 좌표
width 사각형의 너비(픽셀)
height 사각형의 높이(픽셀)

채워진 사각형(fillRect)

fillRect() 메서드는 캔버스에 채워진 사각형을 그린다.

예제

<canvas id="myCanvas1" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas1");

  var ctx = c.getContext("2d");

  ctx.fillRect(20, 20, 150, 100);

</script>

기본적으로 fillRect()는 검은색 사각형을 그린다. 다른 색상을 원한다면 fillStyle 속성을 사용하면 된다.

색상이 있는 채워진 사각형

<canvas id="myCanvas2" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas2");

  var ctx = c.getContext("2d");

  ctx.fillStyle = "#FF0000";

  ctx.fillRect(20, 20, 150, 100);

</script>

위 예제는 빨간색(#FF0000)으로 채워진 사각형을 그린다. fillStyle 속성은 채우기 스타일을 설정하며, 색상 이름, HEX, RGB, RGBA 등 다양한 형식을 사용할 수 있다.

테두리 사각형(strokeRect)

strokeRect() 메서드는 테두리만 있는 사각형을 그린다.

예제

<canvas id="myCanvas3" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas3");

  var ctx = c.getContext("2d");

  ctx.strokeRect(20, 20, 150, 100);

</script>

기본적으로 strokeRect()는 검은색 테두리를 가진 사각형을 그린다. 테두리 색상을 변경하려면 strokeStyle 속성을 사용한다.

색상이 있는 테두리 사각형

<canvas id="myCanvas4" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas4");

  var ctx = c.getContext("2d");

  ctx.strokeStyle = "#FF0000";

  ctx.strokeRect(20, 20, 150, 100);

</script>

이 예제는 빨간색(#FF0000) 테두리를 가진 사각형을 그린다.

선 두께가 있는 테두리 사각형

<canvas id="myCanvas5" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas5");

  var ctx = c.getContext("2d");

  ctx.lineWidth = 5;

  ctx.strokeStyle = "#FF0000";

  ctx.strokeRect(20, 20, 150, 100);

</script>

위 예제는 5픽셀 두께의 빨간색 테두리를 가진 사각형을 그린다. lineWidth 속성은 선의 두께를 픽셀 단위로 설정한다.

투명 사각형(clearRect)

clearRect() 메서드는 지정된 사각형 영역을 지우고 투명하게 만든다.

예제

<canvas id="myCanvas6" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas6");

  var ctx = c.getContext("2d");

  ctx.fillStyle = "#FF0000";

  ctx.fillRect(0, 0, 300, 150);

  ctx.clearRect(50, 25, 200, 100);

</script>

이 예제에서는 먼저 전체 캔버스를 빨간색으로 채운 다음, clearRect() 메서드를 사용하여 중앙에 투명한 사각형 영역을 만든다.

경로를 사용한 사각형 그리기

사각형을 그리는 또 다른 방법은 경로(path)를 사용하는 것이다. 경로를 사용하면 더 복잡한 도형을 만들 수 있고 사각형을 더 세밀하게 제어할 수 있다.

경로로 채워진 사각형 그리기

<canvas id="myCanvas7" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas7");

  var ctx = c.getContext("2d");

  ctx.beginPath();

  ctx.rect(20, 20, 150, 100);

  ctx.fillStyle = "red";

  ctx.fill();

</script>

이 예제에서는 beginPath() 메서드로 새 경로를 시작하고, rect() 메서드로 사각형 경로를 정의한 다음, fill() 메서드로 사각형을 채운다.

경로로 테두리 사각형 그리기

<canvas id="myCanvas8" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas8");

  var ctx = c.getContext("2d");

  ctx.beginPath();

  ctx.rect(20, 20, 150, 100);

  ctx.strokeStyle = "blue";

  ctx.stroke();

</script>

경로를 사용하면 stroke() 메서드로 사각형의 테두리만 그릴 수 있다.

채우기와 테두리가 모두 있는 사각형

<canvas id="myCanvas9" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas9");

  var ctx = c.getContext("2d");

  ctx.beginPath();

  ctx.rect(20, 20, 150, 100);

  ctx.fillStyle = "yellow";

  ctx.fill();

  ctx.strokeStyle = "black";

  ctx.lineWidth = 2;

  ctx.stroke();

</script>

이 예제는 노란색으로 채워지고 검은색 테두리를 가진 사각형을 그린다.

선으로 사각형 그리기

개별 선을 그려서 사각형을 만들 수도 있다. 이 방법은 더 많은 제어가 필요할 때 유용하다.

선으로 사각형 테두리 그리기

<canvas id="myCanvas10" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas10");

  var ctx = c.getContext("2d");

  ctx.beginPath();

  ctx.moveTo(20, 20);

  ctx.lineTo(170, 20);

  ctx.lineTo(170, 120);

  ctx.lineTo(20, 120);

  ctx.closePath();

  ctx.strokeStyle = "green";

  ctx.lineWidth = 3;

  ctx.stroke();

</script>

이 예제는 lineTo() 메서드를 사용하여 네 개의 선을 그려 사각형을 만든다. closePath() 메서드는 현재 위치에서 시작점까지 직선을 그려 경로를 닫는다.

선으로 채워진 사각형 그리기

<canvas id="myCanvas11" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas11");

  var ctx = c.getContext("2d");

  ctx.beginPath();

  ctx.moveTo(20, 20);

  ctx.lineTo(170, 20);

  ctx.lineTo(170, 120);

  ctx.lineTo(20, 120);

  ctx.closePath();

  ctx.fillStyle = "purple";

  ctx.fill();

</script>

경로를 닫은 후 fill() 메서드를 사용하면 사각형이 채워진다.

💡 사각형 그리기 팁:
• 사각형을 그릴 때는 항상 좌표계를 고려하자. 캔버스의 왼쪽 상단 모서리가 (0,0)이다
• 그라데이션이나 패턴을 fillStyle로 사용하면 더 다양한 효과를 만들 수 있다
• 투명도가 필요하면 RGBA 색상 값을 사용하면 된다 (예: “rgba(255, 0, 0, 0.5)”)

그라데이션 채우기로 사각형 그리기

Canvas의 그라데이션 기능을 사용하여 더 다양한 사각형 효과를 만들 수 있다.

선형 그라데이션 사각형

<canvas id="myCanvas12" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas12");

  var ctx = c.getContext("2d");

  var gradient = ctx.createLinearGradient(0, 0, 300, 0);

  gradient.addColorStop(0, "magenta");

  gradient.addColorStop(0.5, "blue");

  gradient.addColorStop(1, "red");

  ctx.fillStyle = gradient;

  ctx.fillRect(20, 20, 260, 100);

</script>

이 예제는 왼쪽에서 오른쪽으로 변하는 선형 그라데이션으로 채워진 사각형을 그린다.

방사형 그라데이션 사각형

<canvas id="myCanvas13" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

  var c = document.getElementById("myCanvas13");

  var ctx = c.getContext("2d");

  var gradient = ctx.createRadialGradient(150, 75, 10, 150, 75, 100);

  gradient.addColorStop(0, "red");

  gradient.addColorStop(1, "white");

  ctx.fillStyle = gradient;

  ctx.fillRect(20, 20, 260, 100);

</script>

방사형 그라데이션은 중심에서 바깥쪽으로 색상이 변한다. 이 예제에서는 빨간색 중심에서 흰색 가장자리로 변하는 그라데이션을 만든다.

Canvas에서 사각형을 그리는 여러 방법을 배웠다. 이러한 기본 도형과 채우기 기술을 마스터하면 더 복잡한 그래픽과 애니메이션을 만들 수 있다.

참고
W3C School - HTML Canvas Rectangles
Mingg`s Diary
밍구
공부 목적 블로그
모든 포스트 보기

댓글

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.

이 사이트는 Akismet을 사용하여 스팸을 줄입니다. 댓글 데이터가 어떻게 처리되는지 알아보세요.

  • « 프로그래밍에 Claude AI 활용하기: 코드 작성부터 디버깅까지