캔버스 JS 기술 마스터링에 대한 종합 가이드

초보자부터 숙련자까지: Canvas JS 기술 가이드

소개:
Canvas는 JavaScript를 통해 동적으로 그래픽을 그릴 수 있는 HTML5의 중요한 기능입니다. 차트 작성, 그래프 그리기, 데이터 표시에 사용할 수 있는 강력한 그리기 기능을 제공합니다. 이 기사에서는 코드 예제를 사용하여 독자가 초보자 수준에서 Canvas JS 기술에 익숙해지도록 점차적으로 안내하여 그리기 능력을 향상시키는 데 도움을 줄 것입니다.

1. Canvas의 기본 사용법
먼저 HTML 파일에 Canvas 요소를 추가한 다음 JavaScript를 사용하여 해당 컨텍스트를 가져와야 합니다. 다음은 간단한 예입니다.

<canvas id="myCanvas" width="500" height="500"></canvas>

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

위 코드를 사용하여 500x500픽셀 크기의 캔버스를 만들고 해당 그리기 컨텍스트를 얻습니다.

2. 기본 그래픽 그리기

1. 직사각형 그리기

   context.fillStyle = "red";
   context.fillRect(100, 100, 200, 150);

   위 코드는 캔버스에 빨간색 직사각형을 그립니다. 시작점 좌표는 (100, 100), 너비는 200, 높이는 150.

2. 원 그리기

   context.beginPath();
   context.arc(250, 250, 100, 0, Math.PI * 2, false);
   context.fillStyle = "green";
   context.fill();

   위 코드는 중심 좌표가 (250, 250)이고 반경이 100인 녹색 원을 그립니다.

3. 직선 그리기

   context.beginPath();
   context.moveTo(100, 100);
   context.lineTo(300, 300);
   context.lineWidth = 5;
   context.strokeStyle = "blue";
   context.stroke();

   위 코드는 시작점 좌표가 (100, 100), 끝점 좌표가 (300, 300), 선 굵기가 5, 색상으로 직선을 그립니다. 파란색이다.

3. 차트 그리기

1. 막대 차트 그리기

var data = [30, 50, 70, 90];
var colors = ["red", "green", "blue", "yellow"];

// 绘制坐标系
context.beginPath();
context.moveTo(50, 50);
context.lineTo(50, 350);
context.lineTo(450, 350);
context.stroke();

for (var i = 0; i < data.length; i++) {
  var barHeight = data[i];
  var barX = 60 + i * 80;
  var barY = 350 - barHeight;

  // 绘制柱状图
  context.fillStyle = colors[i];
  context.fillRect(barX, barY, 50, barHeight);
}

위 코드는 간단한 막대 차트를 그립니다. 데이터 배열은 각 열의 높이를 저장하고, 색상 배열은 각 열의 색상을 저장합니다. for 루프를 통해 데이터 배열을 탐색하고 차례로 각 열을 그립니다.

2. 원형 차트 그리기

var data = [20, 30, 40, 10];
var colors = ["red", "green", "blue", "yellow"];

var total = data.reduce(function (a, b) {
  return a + b;
}, 0);

var startAngle = 0;

for (var i = 0; i < data.length; i++) {
  var endAngle = startAngle + (data[i] / total) * Math.PI * 2;

  context.beginPath();
  context.moveTo(250, 250);
  context.arc(250, 250, 200, startAngle, endAngle, false);
  context.closePath();

  context.fillStyle = colors[i];
  context.fill();

  startAngle = endAngle;
}

위 코드는 원형 차트를 그립니다. 데이터 배열은 각 섹터의 크기를 저장하고, 색상 배열은 섹터의 색상을 저장합니다. 루프를 통해 각 부채꼴의 시작 각도와 끝 각도를 계산하고 호 방법을 사용하여 부채꼴을 그립니다.

결론:
이 글에서는 Canvas JS 기술의 기본적인 사용법과 차트를 그리는 과정을 코드 예제를 통해 소개합니다. 캔버스는 간단한 그래픽 그리기부터 복잡한 차트 표시까지 사용할 수 있는 풍부한 그리기 기능을 제공합니다. 이 글을 통해 독자들이 Canvas JS 기술에 대한 이해를 깊게 하고 실제 프로젝트에 적용하여 드로잉 능력을 향상시키는 데 도움이 되기를 바랍니다.

위 내용은 캔버스 JS 기술 마스터링에 대한 종합 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!