그라데이션을 만드는 방법(HTML)

아티클
03/04/2016

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

모양과 선을 단색으로만 해야 하는 것은 아닙니다. 캔버스에 사용되는 그라데이션은 실제로 색 값 유형이므로 fillStyle 및 strokeStyle 속성에 적용할 수 있습니다.

그라데이션은 이미지에서 농도 또는 색의 방향 변화를 만드는 데 사용할 수 있습니다. 이것은 배경 이미지를 만들거나 지도에서 고도를 표시하거나 평면에 조명과 음영을 추가할 때 유용합니다.

그라데이션을 사용하면 이 효과를 내기 위해 이미지를 사용할 필요가 없고 로드에 소요되는 대역폭과 시간을 최소화할 수 있으므로 웹앱을 간소화하는 데 유용합니다. 또한 그라데이션은 프로그래밍 방식으로 생성되므로 배율을 변경하고 재사용하기가 쉽습니다.

사전 요구 사항

이 항목에서는 사용자가 JavaScript용 Windows 라이브러리 템플릿을 사용하는 JavaScript를 사용하여 기본 Windows 스토어 앱을 만들 수 있다고 가정합니다. JavaScript로 작성된 첫 번째 Windows 스토어 앱 만들기에 대한 지침은 첫 번째 웹앱 만들기를 참조하세요. WinJS 템플릿 사용에 대한 지침은 WinJS 도구 키트를 얻고 사용하는 방법을 참조하세요.

지침

단계 1: 렌더링 컨텍스트 가져오기

캔버스에 이미지를 그리고 그라데이션으로 이미지에 색을 입히려면 캔버스 요소에서 렌더링 컨텍스트를 가져와야 합니다. 렌더링 컨텍스트는 모든 그리기 메서드와 속성이 지정되는 곳입니다.

JavaScript를 사용하는 Windows 스토어 앱의 성능을 개선하려면 JavaScript 코드를 실행하기 전에 HTML 페이지가 로드될 때까지 기다리세요. 페이지가 로드된 후 호출되는 기능에 이미지를 그릴 코드를 배치하면 됩니다.
```
window.onload = drawGradient;   

function drawGradient() {...
```
getElementById를 사용하여 캔버스 DOM(문서 개체 모델) 노드를 검색한 다음 getContext 메서드를 사용하여 렌더링 컨텍스트에 액세스합니다.

여러 가지 그리기 방법을 지원하는 다양한 유형의 렌더링 컨텍스트가 있습니다. 예를 들면, 2D 그래픽용 2D 컨텍스트와 3D 그래픽용 3D 컨텍스트가 있습니다. 이 항목의 예제에서는 2D 렌더링 컨텍스트를 사용합니다.
```
    // Get the canvas element and specify a 2d drawing context.
    var context = document.getElementById("canvas").getContext("2d");
```

단계 2: 그라데이션 만들기

렌더링 컨텍스트를 가져왔으면 그라데이션을 정의할 수 있습니다. 그라데이션에는 선형 또는 직선 그라데이션과 방사형 또는 원형 그라데이션이 있습니다.

Linear gradient

선형 그라데이션 메서드는 네 가지 인수를 사용합니다.

createLinearGradient(startX, startY, endX, endY)

처음 두 가지 인수 집합은 그라이데이션의 시작 x 및 y 위치이며, 두 번째 인수 집합은 그라이데이션의 끝 x 및 y 위치입니다.

세로 선형 그라데이션

이 예제에서는 createLinearGradient 메서드가 myGradient 변수에 할당됩니다. 이것은 그라데이션에 색을 추가하는 다음 단계에서 유용합니다.
```
var myGradient=context.createLinearGradient(0, 0, 200, 0);
```
한쪽에서 다른 쪽으로 음영이 생기는 세로 선형 그라데이션을 만들려면 시작 x 및 y 위치를 0과 0에 설정하고 끝 x 및 y 위치를 200과 0에 설정합니다. y 값(두 번째 및 네 번째 매개 변수)은 둘 다 0이므로 왼쪽에서 오른쪽으로 고르게 음영이 생깁니다.
가로 그라데이션.

위쪽에서 아래쪽으로 음영이 생기는 그라데이션을 만들려면 x 값(첫 번째 및 세 번째 매개 변수)을 일정하게 유지하고 y 값(두 번째 및 네 번째 매개 변수) 범위를 0에서 캔버스 높이까지 조정합니다.
```
var myGradient=context.createLinearGradient(0, 0, 0, 100);
```
대각선 그라데이션.

대각선을 따라 그라데이션을 만들 수도 있습니다. 이 예제에서는 x 값과 y 값이 둘 다 각각 200과 100으로 다르게 설정됩니다.
```
var myGradient=context.createLinearGradient(0, 0, 200, 100);
```

Radial gradient

createRadialGradient 메서드는 다음 6개 인수를 사용합니다.

createRadialGradient(startX, startY, startRadius, endX, endY, endRadius)

여기서 각 매개 변수는 다음을 나타냅니다.

startX 및 startY는 캔버스에서 시작 원을 나타내는 x 및 y 좌표입니다.
startRadius는 시작 원의 반경입니다.
endX 및 endY는 캔버스에서 끝 원을 나타내는 x 및 y 좌표입니다.
endRadius는 끝 원의 반경입니다.

기존의 방사형 그라데이션

색이 한 원에서 다른 원으로 고르게 페이드되는 "traditional" 방사형 그라데이션을 만들려면 두 원의 x/y 좌표를 같은 값으로 설정하고 그라데이션 원들 중 하나가 다른 하나보다 커야 합니다.
```
var myGradient = context.createRadialGradient(52, 50, 10, 52, 50, 200);
```
서로 다른 시작 및 끝 위치

앞의 방사형 그라데이션 예제에서 x/y 좌표는 시작 위치와 끝 위치 모두 52와 50으로 같으며, 각 원의 반경만 10에서 200으로 커졌습니다. 이것은 방사형 그라데이션의 음영을 원 중심에 놓습니다.

시작 위치와 끝 위치를 더 멀어지게 옮기면 캔버스를 가로질러 길게 늘어나는 그라데이션 같은 원뿔 모양이 됩니다.
```
var myGradient = context.createRadialGradient(32, 30, 5, 60, 60, 50);
```
이 예제에서 시작 원 x/y 좌표는 32와 30이며 반경은 5입니다. 끝 원 x/y 좌표는 60과 60이며 반경은 그보다 큰 50입니다. 다음은 결과입니다.

단계 3: 색 중단점 설정

그라데이션에는 두 개 이상의 addColorStop 메서드가 있습니다.

addColorStop(offset, color)

색 중단점을 추가하려면 적용할 색 및 그라데이션과 나란한 오프셋 위치를 지정해야 합니다. 그라데이션 위치는 그라데이션의 시작 지점인 0과 끝 지점인 1 사이에 오게 됩니다.

이 예제에서 myGradient 변수는 0에서 1까지 addColorStop을 설정하는 데 사용되므로 그라데이션은 흰색에서 검은색으로 고르게 음영이 생깁니다.

myGradient.addColorStop(0,"white");
myGradient.addColorStop(1,"black");

여러 개의 색 중단점

여러 개의 색 중지점을 사용할 수 있습니다. 다음 예제에서 두 번째 addColorStop은 그라데이션을 가로지르는 도중에 색 중지점을 할당합니다.
```
  myGradient.addColorStop(0,"orange");
  myGradient.addColorStop(.5, "green");
  myGradient.addColorStop(1, "blue");
```
이 그라데이션을 생성:

단계 4: 채우기 유형 설정

그라데이션을 그리기 전에 fillStyle을 myGradient로 설정해야 합니다.

context.fillStyle = myGradient;

마지막으로 fillRect 메서드는 이미지를 그리는 데 사용됩니다.

context.fillRect(0, 0, 200, 100);

완성된 예제

선형 그라데이션

이 JavaScript 코드는 캔버스 요소를 사용하여 사각형을 그린 다음 사각형의 fillStyle에 대각선 선형 그라데이션을 사용합니다.

window.onload = drawGradient;   

function drawGradient() {

    // Get the canvas element and specify a 2d drawing context.
    var context = document.getElementById("canvas").getContext("2d");

    // Create a linear gradient.
    var myGradient=context.createLinearGradient(0, 0, 300, 100);

    // Set the color stops.
    myGradient.addColorStop(0, "white");
    myGradient.addColorStop(1, "black");

    // Set the fill style to the gradient.
    context.fillStyle = myGradient;

    // Draw the rectangle.
    context.fillRect(0, 0, 200, 100);
}

방사형 그라데이션

이 JavaScript 코드는 캔버스 요소를 사용하여 원을 그린 다음 원의 fillStyle에 방사형 그라데이션을 사용합니다.

window.onload = drawGradient;   

function drawGradient() {

    // Get the canvas element and specify a 2d drawing context.
    var context = document.getElementById("canvas").getContext("2d");
  
    // Create the radial gradient.
    var myGradient = context.createRadialGradient(52, 50, 10, 52, 50, 200);

    // Set the color stops.
    myGradient.addColorStop(0, "white");
    myGradient.addColorStop(1, "black");

    // Set the fill style to the gradient.     
    context.fillStyle = myGradient;

    // Draw a circle.
    context.beginPath();
    context.arc(52, 50, 40, 0, Math.PI*2, true); 
    context.closePath();
    context.fill();
}

CSS(CSS 스타일시트)

이것은 캔버스 요소 주변에 회색 경계를 만드는 CSS의 예입니다.

/* Style the canvas element with a grey border. */
canvas { border: 1px solid #c3c3c3; }

HTML 파일

이 HTML 파일은 캔버스 요소를 만들고 외부 JavaScript 및 CSS 파일을 사용합니다.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="myJavascript.js"></script>
        <link Rel="stylesheet" Href="myStyle.css" Type="text/css">
    </head>
    <body>
        <canvas id="canvas" width="200" height="100" />
    </body>
</html>