JavaScript로 복잡한 그래픽을 그리는 방법

JavaScript는 현대 웹 개발에서 중요한 역할을 하는 매우 강력한 프로그래밍 언어입니다. JavaScript는 웹 페이지 상호 작용 및 동적 효과를 구현하는 것 외에도 Drawing API를 통해 다양하고 복잡한 그래픽을 구현할 수도 있습니다. 그래서 이번 글에서는 JavaScript로 복잡한 그래픽을 그리는 방법을 알려드리겠습니다.

캔버스 및 컨텍스트

Javascript로 그래픽을 구현하려면 먼저 캔버스(Canvas) 요소를 만든 다음 해당 컨텍스트(Context)를 가져와야 합니다. 캔버스는 웹 페이지에 그리기 기능이 있는 직사각형 영역을 만들 수 있는 HTML5 태그입니다. 컨텍스트를 얻는 목적은 캔버스에서 제공하는 그리기 API를 사용하는 것입니다.

캔버스 요소를 생성하는 것은 매우 간단합니다. HTML에 다음 코드를 추가하기만 하면 됩니다.

<canvas id="myCanvas">
  Your browser does not support this feature.
</canvas>

id 속성은 캔버스 요소를 가져오는 데 사용할 수 있으며, 태그 중간에 중첩된 텍스트는 캔버스 요소를 가져오지 않는 브라우저에 표시됩니다. 캔버스 대체 텍스트를 지원합니다. 다음으로 JavaScript를 사용하여 캔버스 요소와 컨텍스트를 가져올 수 있습니다. 코드는 다음과 같습니다.

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');

여기에서는 문서 개체의 getElementById 메서드를 사용하여 ID가 ​​myCanvas인 캔버스 요소를 가져오고 getContext 메서드를 통해 2D 컨텍스트를 가져옵니다. Canvas는 2D, WebGL, WebGL2의 3가지 컨텍스트 유형을 지원합니다. 이 기사에서는 2D 컨텍스트를 사용합니다.

기본 모양 그리기

2D 컨텍스트를 얻은 후 그리기를 시작할 수 있습니다. Canvas API는 기본 모양을 설명하기 위한 일련의 방법을 제공하며 일반적으로 사용되는 방법으로는 직사각형, 호, 선 등이 있습니다.

예를 들어 다음 코드를 통해 직사각형을 그릴 수 있습니다.

ctx.fillStyle = "#FF0000";
ctx.fillRect(10, 10, 50, 50);

위 코드에서는 fillStyle 속성을 사용하여 채우기 색상을 설정하고, fillRect 메서드를 사용하여 직사각형을 그립니다. fillRect 메소드의 매개변수는 직사각형의 왼쪽 상단 좌표(x, y)와 직사각형의 너비와 높이(너비, 높이)입니다.

다음으로 다음 코드를 통해 원을 그릴 수 있습니다.

ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = "#FFFF00";
ctx.fill();

위 코드에서 새로운 경로 그리기를 시작하려면 BeginPath 메서드를 사용합니다. 매개변수는 원형 경로를 그리는 데 사용됩니다. (x, y), 반경(r), 시작 각도(startAngle) 및 끝 각도(endAngle). 완전한 원을 그리려고 하므로 시작 각도는 0이고 끝 각도는 2π입니다. 마지막으로 채우기 색상을 노란색으로 설정하고 채우기 메서드를 사용하여 경로를 채웁니다.

복잡한 모양 그리기

기본 모양 외에도 Canvas API를 사용하여 다양하고 복잡한 모양을 그릴 수도 있습니다. 이를 위해서는 Path2D 개체와 베지어 곡선을 사용해야 합니다.

Path2D 객체는 경로를 저장하는 데이터 구조입니다. 이 객체를 통해 복잡한 경로를 설명할 수 있습니다. 예를 들어, 다음 코드는 3개의 선분으로 구성된 경로를 그립니다.

let path = new Path2D();
path.moveTo(0, 0);
path.lineTo(0, 50);
path.lineTo(50, 50);
ctx.stroke(path);

위 코드에서 moveTo 메소드를 사용하여 경로의 시작점을 (0,0)으로 설정하고, lineTo 메소드를 사용하여 3개의 선을 그립니다. 순서대로 세그먼트를 만들고 마지막으로 스트로크 방법을 사용하여 경로를 그립니다.

베지어 곡선은 부드러운 곡선을 설명하는 데 사용되는 수학 함수입니다. Canvas API는 2차 및 3차 베지어 곡선을 그리는 데 있어 QuadraticCurveTo 및 bezierCurveTo라는 두 가지 메서드를 제공합니다.

예를 들어 다음 코드는 3개의 점으로 구성된 3차 베지어 곡선 경로를 그립니다.

let path = new Path2D();
path.moveTo(20, 20);
path.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke(path);

위 코드에서 moveTo 메서드를 사용하여 경로의 시작점을 (20,20)으로 설정하고 bezierCurveTo 메서드를 사용합니다. 즉시 3개의 매개변수 세트, 즉 2개의 제어점과 1개의 끝점을 따릅니다. 3차 베지어 곡선의 정의에 따르면 시작점과 끝점이 곡선 위에 있고 제어점이 곡선의 곡률에 영향을 줍니다.

그라디언트 및 그림 그리기

캔버스 API는 모양 외에도 그라디언트 및 그림 그리기도 지원합니다. 먼저 그라데이션이 어떻게 그려지는지 살펴보세요.

그라디언트는 채우기 색상이나 획 색상에 사용할 수 있습니다. Canvas API는 선형 그래디언트와 방사형 그래디언트를 지원합니다. 다음은 선형 그래디언트를 사용하여 직사각형을 채우는 코드입니다.

let gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, '#FF0000');
gradient.addColorStop(1, '#00FF00');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

위 코드에서 createLinearGradient 메소드를 사용하여 선형 그래디언트를 생성하고 매개변수는 시작점 좌표(x0, y0)와 끝점입니다. 점 좌표(x1, y1). addColorStop 메소드는 그라데이션 색상의 위치와 값을 설정하는 데 사용됩니다. 여기서 position 매개변수는 0과 1 사이의 값입니다.

다음으로 그림 그리기를 살펴보겠습니다.

Canvas API는 사진을 캔버스로 사용하여 더 복잡한 효과를 얻을 수 있도록 지원합니다. 다음은 직사각형을 그림으로 채우는 코드입니다.

let img = new Image();
img.onload = function(){
  let pattern = ctx.createPattern(img, 'repeat');
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
};
img.src = 'image.png';

위 코드에서는 먼저 그림 개체를 만들고 이에 대한 onload 이벤트를 설정합니다. 이미지가 로드된 후 createPattern 메소드를 사용하여 패턴을 생성하고 매개변수는 이미지 객체와 그리기 메소드입니다('반복'은 타일 확장을 의미함). 마지막으로 fillRect 메소드를 사용하여 패턴을 채웁니다.

요약

Canvas API 소개를 통해 우리는 JavaScript를 사용하여 다양하고 복잡한 그래픽을 그릴 수 있음을 알 수 있습니다. 기본 모양 외에도 Path2D 객체와 베지어 곡선을 통해 다양한 복잡한 경로를 설명할 수 있습니다. 그라데이션과 그림 그리기를 통해 더욱 풍부한 효과를 얻을 수도 있습니다. 물론 이것은 간략한 소개에 불과합니다. Canvas API에는 기능이 풍부하고 더 많은 고급 응용 방법이 있으므로 계속해서 배우고 연습해야 합니다.

위 내용은 JavaScript로 복잡한 그래픽을 그리는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!