빠른 시작: 캔버스에 그리기(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
캔버스 요소는 페이지에 사각 비트맵 캔버스를 생성합니다. 이 캔버스에 JavaScript를 사용하여 그래픽 이미지를 즉석에서 그릴 수 있습니다. 이 캔버스는 실시간으로 그래픽을 생성하거나 정기적으로 그래픽을 변경하는 경우 또는 게임을 만들 때 매우 유용합니다.
이 빠른 시작의 내용은 다음과 같습니다.
- 사전 요구 사항
- 캔버스 요소
- 렌더링 컨텍스트
- 사각형 그리기
- 패스 사용
- 호 그리기
- 곡선 그리기
- 정방형 곡선
- 베지어 입방형 곡선
- 다음 단계
사전 요구 사항
이 항목에서는 JavaScript용 Windows 라이브러리 템플릿을 사용하는 JavaScript로 작성한 기본 Windows 스토어 앱을 만들 수 있으며 HTML 및 JavaScript의 기본적인 사항을 이해하고 있다고 가정합니다. JavaScript로 작성된 첫 번째 Windows 스토어 앱 만들기에 대한 지침은 첫 번째 웹앱 만들기를 참조하세요. WinJS 템플릿 사용에 대한 지침은 WinJS 도구 키트를 얻고 사용하는 방법을 참조하세요.
캔버스 요소
캔버스 요소는 페이지에 사각 비트맵 캔버스를 생성합니다. 이 캔버스 안에서는 JavaScript를 사용하여 그래픽 이미지를 즉석에서 렌더링할 수 있습니다.
캔버스 요소에는 너비 및 높이 특성이 있습니다. 두 특성 모두 선택 사항이며 DOM(문서 개체 모델) 속성을 사용하여 설정할 수 있습니다. 너비 및 높이 특성을 설정하지 않으면 캔버스가 기본 크기인 가로 300픽셀 x 세로 150픽셀 크기로 나타납니다.
<canvas id="canvas" width="150" height="150"></canvas>
ID 특성은 캔버스 요소에는 포함되지 않지만 스크립트에서 캔버스 요소를 식별하는 데 사용됩니다.
CSS(Cascading Style Sheet) 스타일시트를 사용하여 캔버스 크기를 설정할 수 있습니다. 기본적으로 앱은 내용이나 테두리 없이 완전히 투명하게 캔버스 요소를 렌더링합니다. 하지만 여백, 테두리, 배경 등을 지정하여 일반적인 이미지처럼 캔버스 요소의 스타일을 지정할 수 있습니다. 스타일 지정은 캔버스의 실제 드로잉에는 영향을 주지 않습니다.
렌더링 컨텍스트
캔버스 요소를 앱에 추가하면 투명한 드로잉 화면이 만들어집니다. 캔버스에 그리려면 캔버스에서 렌더링 컨텍스트를 가져와서 이 컨텍스트를 사용하여 그립니다. 여러 가지 그리기 방법을 지원하는 다양한 유형의 렌더링 컨텍스트가 있습니다. 예를 들면, 2D 그래픽용 2D 컨텍스트와 3D 그래픽용 3D 컨텍스트가 있습니다. 이 항목의 예제에서는 2D 렌더링 컨텍스트를 사용합니다.
렌더링 컨텍스트를 얻으려면 다음 예제에서처럼 캔버스의 getContext 메서드를 호출합니다.
var canvas = document.getElementById("quickstart");
var context = canvas.getContext("2d");
이 예제에서는 getElementById를 사용하여 캔버스 DOM 노드를 검색한 다음 getContext 메서드를 사용하여 렌더링 컨텍스트에 액세스하는 것부터 시작합니다. getContent 메서드는 컨텍스트 유형이라는 매개 변수 하나를 사용합니다. 이 예제에서 이 값은 ‘2d’입니다.
렌더링 컨텍스트를 가져온 후에는 해당 컨텍스트를 사용하여 그릴 수 있습니다. 다음 섹션에서는 다양한 셰이프 유형을 그리는 방법에 대해 설명합니다.
사각형 그리기
캔버스에 사각형을 그리는 데 사용할 수 있는 두 가지 함수가 있습니다.
-
fillRect (x, y, width, height)이 메서드는 채워진 사각형을 그립니다.
이 x, y 좌표는 캔버스에 사각형을 배치하는 좌표이며 캔버스의 왼쪽 맨 위를 기준으로 합니다. 너비와 높이는 픽셀 단위로 측정됩니다.
-
strokeRect(x, y, width, height)strokeRect 매개 변수는 fillRect와 같습니다. 차이점은 strokeRect는 사각형의 윤곽선만 그린다는 것입니다.
이 메서드는 지정한 셰이프에 색을 지정합니다.
-
fillStyle = colorfillStyle 메서드는 단일 매개 변수를 사용하여 셰이프에 색을 채웁니다. RGB, 미리 정의된 색(예: "빨강", "파랑" 등), 16진수 색 또는 그라데이션을 사용하여 색을 설정할 수 있습니다. fillStyle 예제에 대해서는 아래의 사각형 그리기 예제를 참조하세요.
이 메서드는 지정한 영역을 지우고 완전 투명으로 만듭니다.
-
clearRect(x, y, width, height)fillRect 및 strokeRect 메서드와 마찬가지로, clearRect 매개 변수 x 및 y는 지울 사각형 영역을 찾고 사각형의 너비와 높이를 설정합니다.
예제
캔버스를 생성하고 채워진 정사각형(금색 정사각형과 투명 보라색 정사각형) 두 개를 그리는 예제부터 시작하겠습니다. CSS는 캔버스 주변에 검은색 테두리를 만드는 데 사용됩니다.
.png "채워진 정사각형 두 개.")
이 예제는 HTML의 <body> 안에서 캔버스 요소를 선언하는 것으로 시작됩니다. 캔버스 요소에는 "canvas"라는 ID 특성이 할당되며 이 요소의 높이와 너비 특성은 100픽셀로 설정됩니다.
<body>
<canvas id="canvas" width="100" height="100" />
</body>
CSS를 사용하여 1픽셀 너비의 검은색 단색 테두리가 있는 캔버스 요소가 만들어집니다. 가능한 효율적으로 파일을 로드하려면 이 CSS를 외부 파일 안에 포함해야 합니다.
/* style the canvas element with a black border. */
canvas { border: 1px solid black; }
캔버스에 채워진 사각형 두 개를 그리는 JavaScript 코드도 외부 파일 안에 포함됩니다. 이 코드는 HTML 문서가 로드되고 나서 window onload 이벤트 처리기를 사용하여 draw 함수를 호출하는 것으로 시작됩니다.
window.onload = draw;
draw 메서드는 getElementById 메서드를 사용하여 캔버스 요소를 가져옵니다. 그런 다음 getContext 메서드를 호출하여 드로잉 컨텍스트를 가져옵니다. 문자열 "2d"를 getContext 메서드에 전달해야 합니다.
각 캔버스마다 하나의 드로잉 컨텍스트가 있습니다. 모든 드로잉 메서드와 속성이 드로잉 컨텍스트에서 정의됩니다.
// Get the canvas element.
var canvas = document.getElementById("canvas");
// Specify a 2-D drawing context.
var context = canvas.getContext("2d");
첫 번째 정사각형을 그리기 위해 fillStyle이 하나의 색으로 설정됩니다. 정사각형을 채우는 방법에는 몇 가지가 있습니다. 이 예제에서는 금색에 해당하는 RGB를 사용합니다.
context.fillStyle = "rgb(255, 215, 0)";
그 밖에도 다음과 같은 방법으로 fillStyle을 설정할 수 있습니다.
이러한 방법을 사용할 수 있는 경우 "yellow", "orange", "purple" 등 미리 정의된 색을 사용할 수 있습니다.
context.fillStyle = "gold";또는 #RRGGBB 형식의 16진수 색 표현을 사용합니다.
context.fillStyle = "#FFD700";이 16진수는 진한 황금색입니다.
색으로 간주되지는 않지만 fillStyle에 그라데이션을 사용할 수 있습니다.
var myGradient=context.createLinearGradient(20, 20, 100, 0); myGradient.addColorStop(0,"goldenrod"); myGradient.addColorStop(1,"white"); context.fillStyle = myGradient;다음 예제에서는 선형 그라데이션을 만들고, 색 중지점을 설정하고, 다갈색에서 흰색으로 색이 페이드되는 사각형을 그립니다.
.png "채워진 정사각형 두 개")
기본 fillStyle은 단색 검정입니다.
다음에는 fillRect 메서드를 사용하여 실제로 사각형을 그려보겠습니다. fillRect 값이 사각형의 왼쪽 맨 위 x, y 좌표를 15, 15로 설정하여 채워진 사각형을 그리기 시작합니다. 이 x 및 y 좌표는 캔버스의 왼쪽 맨 위 모서리를 기준으로 합니다. 사각형의 너비와 높이는 각각 55픽셀과 50픽셀로 설정되어 있습니다.
context.fillRect (15, 15, 55, 50);
두 번째 사각형의 경우 fillStyle이 보라색에 해당하는 RGB로 설정됩니다. RGBA에서 네 번째 값인 “A”(알파)는 색의 불투명도를 결정하며, 여기서는 0.5로 설정됩니다. 사용할 수 있는 알파 값은 0.0(완전 투명)에서 1.0(완전 불투명) 사이입니다.
context.fillStyle = "rgba(0, 0, 200, 0.5)"
fillRect 값이 사각형의 왼쪽 맨 위 x 및 y 좌표인 40,40에서 사각형을 그리기 시작합니다. 사각형의 너비와 높이는 각각 45픽셀과 40픽셀로 설정되어 있습니다.
context.fillRect (40, 40, 45, 40);
전체 코드 예제는 다음과 같습니다.
이 코드는 JavaScript 코드입니다. 이 예제에서는 이 파일의 이름이 myJavascript.js로 지정됩니다.
window.onload = draw;
// This function is called on page load.
function draw() {
// Get the canvas element.
var canvas = document.getElementById("canvas");
// Specify a 2d drawing context.
var context = canvas.getContext("2d");
// Set the color to the RGB equivalent of gold.
context.fillStyle = "rgb(255, 215, 0)";
// Draw the rectangle.
context.fillRect (15, 15, 55, 50);
// Set the color to the RGB equivalent of purple and
// set the opacity of the rectangle to 50 percent.
context.fillStyle = "rgba(0, 0, 200, 0.5)"
// Draw the rectangle.
context.fillRect (40, 40, 45, 40);
}
이 파일은 HTML 파일입니다.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="myJavascript.js" defer="defer"></script>
<link Rel="stylesheet" Href="myStyle.css" Type="text/css">
</head>
<body>
<canvas id="canvas" width="100" height="100" />
</body>
</html>
패스 사용
beginPath 메서드는 새 패스를 시작하고moveTo, lineTo, arc 등 추가 메서드를 사용하여 선, 곡선 및 기타 셰이프가 결합된 형태를 그립니다.
패스가 만들어지고 나면 fillStyle 또는 strokeStyle 메서드를 사용하여 이 패스를 캔버스로 렌더링할 수 있습니다.
예제
이 예제에서는 갈색 삼각형을 그립니다.
.png "채워진 삼각형")
첫 번째 예제에서 사용했던 것과 동일한 HTML 및 CSS 파일을 사용하겠습니다. myJavascript JavaScript 파일에서 동일한 draw 함수를 사용하고 HTML을 로드한 후 다시 호출하겠습니다.
캔버스 요소를 가져오고 2D 캔버스 유형을 지정한 후 beginPath 메서드를 호출하여 갈색 삼각형을 그리기 시작합니다.
context.beginPath();
내부적으로는 패스가 함께 모양을 형성하는 하위 패스(선, 호 등) 목록으로 저장됩니다. beginPath 메서드를 호출할 때마다 이 목록이 원래대로 설정되므로 새 셰이프를 그리기 시작할 수 있습니다.
선을 그리기 전에 moveTo 함수를 호출해야 합니다. moveTo 함수는 아무 항목도 그리지 않으며, 삼각형 그리기를 시작할 지점에 펜이나 연필을 놓는 기능을 합니다.
context.moveTo(28, 20);
moveTo는 두 개의 인수(x, y 좌표)를 사용합니다. 여기서는 x 좌표를 28로 설정하고 y 좌표를 20으로 설정했습니다. 이러한 좌표는 개체를 그려 넣을 캔버스의 테두리를 기준으로 합니다.
이제 lineTo 함수를 사용하여 삼각형의 선을 그리겠습니다. moveTo 함수와 마찬가지로, lineTo 함수도 그리려는 선의 끝점을 나타내는 x, y 좌표인 두 개의 인수를 사용합니다.
context.lineTo(78, 50);
context.lineTo(28, 78);
context.lineTo(28, 20);
다음 예제에서는 fillStyle 속성을 갈색에 해당하는 16진수 값으로 설정합니다. 사각형 그리기 섹션에서 설명했듯이, fillStyle 속성은 RGB, 16진수, 미리 정의된 색 또는 그라데이션 중 하나로 설정할 수 있습니다.
context.fillStyle = "#996633";
fillStyle을 사용하여 삼각형을 단색 갈색으로 칠하려고 합니다. strokeStyle 함수를 사용하여 셰이프의 윤곽선만 칠할 수 있습니다.
이제 삼각형 모양을 그립니다.
context.fill();
전체 JavaScript 코드는 다음과 같습니다.
// Get the canvas element.
var canvas = document.getElementById("canvas");
// Specify a 2-D canvas type.
var context = canvas.getContext("2d");
// Add the brown triangle.
context.beginPath();
context.moveTo(28, 20);
context.lineTo(78, 50);
context.lineTo(28, 78);
context.lineTo(28, 20);
// Set the color to the hexadecimal equivalent of brown.
// Omit this step and the triangle will render
// the default color of black.
context.fillStyle = "#996633";
// Draw the triangle.
context.fill();
호 그리기
호 또는 원을 그리는 경우 arc 메서드를 사용합니다.
context.arc(x, y, radius, startingAngle, endingAngle, antiClockwise);
이 메서드는 다음 3개의 매개 변수를 사용합니다.
- x와 y는 원의 중심 좌표입니다.
- 반경은 원의 중심에서 원 위의 한 점에 이르는 거리입니다.
- startingAngle 및 endingAngle 매개 변수는 x축에서 측정된 호의 시작점과 끝점을 라디안 단위로 정의합니다.
- anticlockwise 매개 변수는 true일 경우 시계 반대 방향으로 호를 그리고, 그렇지 않으면 시계 방향으로 그리는 부울 값입니다.
예제
이 예제에서는 파란색 원을 그립니다.
.png "파란색 원")
캔버스 요소를 가져오고 2D 캔버스 유형을 지정한 후 beginPath 메서드를 호출하여 원을 그리기 시작합니다.
context.beginPath();
앞의 사각형 및 삼각형 예제에서는 fillStyle 함수를 사용하여 셰이프를 채우고 색을 지정했습니다. 다음 예제에서는 RGB 색을 파랑으로 설정하고 strokeStyle을 사용하여 원의 윤곽선만 그립니다.
// Define the stroke color in RGB for blue.
context.strokeStyle = "rgb(0, 162, 232)";
arc 함수는 다음과 같이 정의됩니다.
// Define the circle using an arc.
context.arc(50, 50, 32, 0, 2 * Math.PI, true);
설명:
- x, y 좌표는 원의 중심을 50, 50에 각각 배치합니다.
- 원의 반경은 32로 설정됩니다.
- 원의 시작과 끝은 0과 전체 원인 "2 * Math.PI" 라디안으로 설정됩니다.
- anticlockwise 매개 변수는 true로 설정되며, 전체 원을 그릴 때는 중요하지 않지만 호의 일부에는 매우 중요합니다.
마지막으로 방금 정의한 원을 그리는 데 stroke 함수가 사용됩니다.
// draw the circle.
context.stroke();
호의 ½만 그리거나 0에서 Math.PI까지만 그릴 경우에는 이 원의 모양은 다음과 같습니다.
// Define the circle using an arc.
context.arc(50, 50, 32, 0, Math.PI, true);
.png "반만 그려진 원.")
이 코드는 JavaScript 코드입니다. 앞에서도 말했듯이, 이 코드는 HTML 페이지가 로드된 후에 호출되는 draw 함수에 포함될 것입니다. 전체 HTML 또는 JavaScript 파일 예제는 사각형 그리기 섹션을 참조하세요.
// Get the canvas element.
var canvas = document.getElementById("canvas");
// Specify a 2-D canvas type.
var context = canvas.getContext("2d");
// Start the path.
context.beginPath();
// Define the stroke color in RGB for blue.
context.strokeStyle = "rgb(0, 162, 232)";
// Define the circle using an arc.
context.arc(50, 50, 32, 0, 2 * Math.PI, true);
// draw the circle.
context.stroke();
곡선 그리기
곡선은 복잡한 모양을 그리는 데 사용됩니다. 곡선 유형으로는 3차원(입방형)과 quadratic, 두 가지가 있습니다. 두 유형 모두 캔버스에 시작점과 끝점이 있지만 곡선이 하나 또는 여러 개의 제어점에 따라 그려집니다. quadratic 곡선은 제어점이 한 개이고 입방형 3차원 곡선에는 두 개의 제어점이 사용됩니다. 곡선은 항상 패스에 포함됩니다.
정방형 곡선
다음은 quadraticCurveTo 메서드입니다.
quadraticCurveTo(cp1x, cp1y, X, Y)
네 개 매개 변수는 X, Y 좌표 두 쌍입니다. 첫 번째 좌표 쌍인 cp1x 및 cp1y는 곡선 제어점의 위치이며 두 번째 좌표 쌍은 곡선 끝점의 위치입니다.
모든 모양과 마찬가지로 곡선도 곡선을 시작할 x 및 y 좌표를 제공하는 moveTo(x, y) 메서드로 시작됩니다.
가상 접선 두 개가 끝점에서 제어점까지 그려집니다. 접선 주변을 움직이는 선에 의해 곡선이 그려집니다.
.png "4분면 제어점.")
예제
다음 예제에서는 일련의 quadraticCurveTo 메서드를 사용하여 밑면이 물결 형태의 곡선으로 된 특이한 모양을 그립니다. 제어점이 끝점에 가까워 질수록 물결 곡선 밑면의 곡선이 작아집니다.
.png "정방형 곡선.")
캔버스 요소를 가져와서 2D 캔버스 유형을 지정하는 것부터 시작하겠습니다. 그런 다음 beginPath 메서드를 호출하여 패스를 만듭니다.
context.beginPath();
그리고 첫 번째 곡선의 시작점을 나타내는 x 및 y 좌표를 각각 75 및 25로 설정합니다.
context.moveTo(75, 25);
각 quadratic 곡선은 다음과 같이 설정됩니다.
context.quadraticCurveTo(10, 80, 40, 130);
context.quadraticCurveTo(30, 90, 50, 130);
context.quadraticCurveTo(50, 100, 70, 130);
context.quadraticCurveTo(80, 110, 100, 130);
context.quadraticCurveTo(120, 120, 140, 130);
각 매개 변수에 대한 설명:
cp1x
제어점의 x 좌표입니다.cp1y
제어점의 y 좌표입니다.x
곡선 끝점의 x 좌표입니다.Y
곡선 끝점의 y 좌표입니다.
여기서는 곡선이 그려지는 순서가 중요합니다. 곡선 하나 또는 두 개를 제거하거나 그려지는 순서를 변경하여 곡선이 어떻게 그려지는지 확인할 수 있습니다.
fillStyle을 녹색에 해당하는 RGB 값으로 설정하여 색을 녹색으로 설정합니다.
context.fillStyle = "rgb(100, 200, 50)";
마지막으로 fill 함수를 사용하여 셰이프에 색을 지정합니다.
context.fill();
이 예제 및 다음 예제에서는 캔버스 크기가 150픽셀 x 150픽셀로 증가되었습니다.
<canvas id="canvas" width="150" height="150" />
전체 예제는 다음과 같습니다.
// Get the canvas element.
var canvas = document.getElementById("canvas");
// Specify a 2-D canvas type.
var context = canvas.getContext("2d");
// Create the path.
context.beginPath();
// Set the starting point for the curve.
context.moveTo(75,25);
// Set each of the curves.
context.quadraticCurveTo(10, 80, 40, 130);
context.quadraticCurveTo(30, 90, 50, 130);
context.quadraticCurveTo(50, 100, 70, 130);
context.quadraticCurveTo(80, 110, 100, 130);
context.quadraticCurveTo(120, 120, 140, 130);
// Set the color of the image to green.
context.fillStyle = "rgb(100, 200, 50)";
// Draw the image.
context.fill();
베지어 입방형 곡선
다음은 bezierCurveTo 메서드입니다.
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
세 쌍의 X, Y 좌표를 나타내는 6개 매개 변수를 사용합니다. cp1x 및 cp1y는 곡선의 첫 번째 제어점 위치이고, cp2x 및 cp2y는 두 번째 제어점의 위치이며, 세 번째 쌍은 곡선 끝점의 위치입니다.
곡선이 moveTo(x, y) 메서드의 x 및 y 좌표로 시작됩니다.
가상 접선이 제어점에서 끝점까지 그려집니다. 그림의 보라색 선이 보여 주듯이 선이 접선을 이동할 때 곡선이 그려집니다.
.png "입방형 제어점입니다.")
예제
이 예제에서는 bezierCurveTo 메서드를 사용하여 밑면이 물결 형태의 곡선으로 된 특이한 모양을 그립니다.
.png "입방형 곡선 예제입니다.")
캔버스 요소를 가져오고 2D 캔버스 유형을 지정한 후 beginPath 메서드를 호출하여 패스를 만듭니다.
context.beginPath();
그리고 첫 번째 곡선의 시작점을 나타내는 x 및 y 좌표를 각각 75 및 25로 설정합니다.
context.moveTo(75, 25);
각 입방형 3차원 곡선은 다음과 같이 설정됩니다.
context.bezierCurveTo(10, 100, 10, 122, 20, 130);
context.bezierCurveTo(20, 100, 20, 122, 30, 130);
context.bezierCurveTo(40, 100, 40, 122, 50, 130);
context.bezierCurveTo(70, 100, 70, 122, 80, 130);
context.bezierCurveTo(110, 100, 110, 122, 120, 130);
context.bezierCurveTo(160, 100, 160, 122, 170, 130);
각 매개 변수에 대한 설명:
cp1x
첫 번째 베지어 제어점의 x 좌표입니다.cp1y
첫 번째 베지어 제어점의 y 좌표입니다.cp2x
두 번째 베지어 제어점의 x 좌표입니다.cp2y
두 번째 베지어 제어점의 y 좌표입니다.x
곡선 끝점의 x 좌표입니다.Y
곡선 끝점의 y 좌표입니다.
여기서는 곡선이 그려지는 순서가 중요합니다. 곡선 하나 또는 두 개를 제거하거나 그려지는 순서를 변경하여 곡선이 어떻게 그려지는지 확인할 수 있습니다.
fillStyle을 빨강에 해당하는 RGB 값으로 설정하여 색을 빨강으로 설정합니다.
context.fillStyle = "rgb(200, 0, 0)";
마지막으로 fill 함수를 사용하여 모양에 색칠합니다.
context.fill();
이 예제에서는 캔버스 크기가 150픽셀 x 150픽셀로 증가되었습니다.
<canvas id="canvas" width="150" height="150" />
전체 코드 예제는 다음과 같습니다.
// Get the canvas element.
var canvas = document.getElementById("canvas");
// Specify a 2-D canvas type.
var context = canvas.getContext("2d");
// Create the path.
context.beginPath();
// Set the starting point for the curve.
context.moveTo(75, 25);
// Set each of the curves.
context.bezierCurveTo(10, 100, 10, 122, 20, 130);
context.bezierCurveTo(20, 100, 20, 122, 30, 130);
context.bezierCurveTo(40, 100, 40, 122, 50, 130);
context.bezierCurveTo(70, 100, 70, 122, 80, 130);
context.bezierCurveTo(110, 100, 110, 122, 120, 130);
context.bezierCurveTo(160, 100, 160, 122, 170, 130);
// Set the color of the image to red.
context.fillStyle = "rgb(200, 0, 0)";
// Draw the image.
context.fill();
다음 단계
이 빠른 시작에서는 캔버스 요소를 추가하여 투명 그리기 화면을 만들었으며 CSS를 사용하여 그 주변에 테두리를 그린 다음 JavaScript를 사용하여 그 위에 그래픽 이미지를 그렸습니다.
fillRect 및 fillStyle을 설정하여 사각형을 그릴 수 있도록 캔버스 요소에서 2D 그리기 컨텍스트를 가져왔습니다. RGB, 16진 값, 미리 정의된 색상 및 그라데이션 등 다양한 방법으로 fillStyle을 설정하여 그래픽의 색상을 지정했습니다.
beginPath 메서드가 어떻게 새 패스를 시작하고 moveTo, lineTo 또는 arc와 같은 추가 메서드를 사용하여 선, 곡선 및 기타 모양이 결합된 형태를 그리는지 살펴보았습니다.
패스가 만들어지고 나서는 fillStyle 및 strokeStyle 메서드를 사용하여 이 패스를 캔버스로 렌더링할 수 있었습니다.
다음에는 캔버스 그래픽에 애니메이션 효과를 주는 방법과 그라데이션을 만드는 방법을 알아보겠습니다.