Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML 캔버스 fillStyle 속성 완벽 정리 – 색상, 그라디언트, 패턴 설정 방법

HTML 캔버스의 fillStyle 속성은 캔버스에 그리는 도형의 채우기 색상, 그라디언트 또는 패턴을 지정하는 데 사용됩니다. 기본값은 #000000(검정색)이며, 별도로 설정하지 않으면 도형이 검정색으로 채워집니다.

<canvas> 요소는 JavaScript를 활용해 웹 페이지 위에서 자유롭게 그래픽을 그릴 수 있게 해주는 강력한 도구입니다. 모든 캔버스 요소는 크기를 결정하는 두 가지 속성, 즉 높이를 나타내는 height와 너비를 나타내는 width를 가지고 있습니다.

fillStyle 속성 문법

ctx.fillStyle = color | gradient | pattern;

위 문법에서 사용할 수 있는 값은 다음과 같습니다.

  • color: 도형을 채울 색상으로, CSS 색상 값(예: #ff0000, rgb(255,0,0), blue 등)을 사용합니다.
  • gradient: 도형을 채우는 선형(linear) 또는 방사형(radial) 그라디언트 객체입니다.
  • pattern: 이미지 등으로 만든 패턴 객체로 도형을 채웁니다.

fillStyle 속성 예제

아래 예제는 선형 그라디언트를 생성한 후 이를 fillStyle로 설정하여 전체 캔버스를 채우는 방법을 보여줍니다. 파란색에서 초록색으로 자연스럽게 변하는 그라디언트가 적용됩니다.

<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="500" height="350" style="border:2px solid orange;">
</canvas>
<script>
    var c = document.getElementById("newCanvas");
    var ctx = c.getContext("2d");
    var newGrad = ctx.createLinearGradient(0, 0, 130, 0);
    newGrad.addColorStop(0, "blue");
    newGrad.addColorStop(0.8, "green");
    ctx.fillStyle = newGrad;
    ctx.fillRect(0, 0, 500, 350);
</script>
</body>
</html>

코드 설명

createLinearGradient() 메서드로 시작점(0, 0)부터 끝점(130, 0)까지의 선형 그라디언트 객체를 생성하고, addColorStop() 메서드로 각 위치별 색상을 지정합니다. 이후 fillStyle에 그라디언트 객체를 할당하고 fillRect()로 500×350 크기의 사각형을 그리면 그라디언트가 적용된 결과를 확인할 수 있습니다.

실행 결과

위 코드를 실행하면 주황색 테두리 안에 파란색에서 초록색으로 부드럽게 전환되는 그라디언트가 채워진 캔버스가 화면에 나타납니다.