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