어떻게 특정한 공유의 조각 파이 차트에서?

Question 1

내가 노력하고 있을 재현한 그래프

내가 무슨 노력을 파악하는 방법을 채우기 일정 비율의 조각에서 중간에 대한 파이 차트한 방법을 채우기 위해 도넛 차트에서 동일한 방법입니다.

사 fillRect()하지만 그를 기입하지 않은 조각이 어떻게 있습니다. 알려주는 경우에 당신이 어떤 아이디어를 내가 어떻게 얻을 수 있는 그래프는 유사한 중 하나 내가 표시됩니다.

var canvas = document.getElementById('Arc');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;

function draw() {
  context.save();
  context.beginPath();
  context.arc(centerX, centerY, 50, 50, (Math.PI) / 2, true);
  context.clip();
  context.fillStyle = '#090A09';
  context.fillRect(centerX, centerY, -25, 50);
  context.lineWidth = 5;
  context.strokeStyle = '#000000';
  context.stroke();
}
draw();

<canvas id="Arc"></canvas>

Question 2

이 fillRect 은 사각형의 경우 파이 무엇이 필요 우리가 할 수 있는 사람들과 함께 호.

파이 시작하는 중심에서의 원리를 이동하는 중심 그리 호고 그들을 채우기 위해 도넛 파이 우리가 할 일이 두 호에 반대 방향으로 다른 반경과 전화 fill()

아래 샘플을 참조하십시오:

var canvas = document.getElementById('Arc');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;

context.beginPath();
context.strokeStyle = 'red';
context.arc(centerX, centerY, 50, 0, Math.PI * 2);
context.stroke();

context.beginPath();
context.fillStyle = 'blue';
context.moveTo(centerX, centerY)
context.arc(centerX, centerY, 50, 0, Math.PI * 0.5);
context.fill()

context.beginPath();
context.fillStyle = 'black';
context.moveTo(centerX, centerY)
context.arc(centerX, centerY, 45, Math.PI * 1.6, Math.PI * 1.8);
context.fill()

context.beginPath();
context.fillStyle = 'lime';
context.arc(centerX, centerY, 51, Math.PI, Math.PI * 1.2);
context.arc(centerX, centerY, 95, Math.PI * 1.2, Math.PI, true);
context.fill()

context.beginPath();
context.fillStyle = 'green';
context.arc(centerX, centerY, 60, Math.PI * 1.8, Math.PI * 2.1);
context.arc(centerX, centerY, 95, Math.PI * 2.1, Math.PI * 1.8, true);
context.fill()

<canvas id="Arc"></canvas>

Helder Sepulveda · Answer 1 · 2021-11-22T17:47:32

이 fillRect 은 사각형의 경우 파이 무엇이 필요 우리가 할 수 있는 사람들과 함께 호.

파이 시작하는 중심에서의 원리를 이동하는 중심 그리 호고 그들을 채우기 위해 도넛 파이 우리가 할 일이 두 호에 반대 방향으로 다른 반경과 전화 fill()

아래 샘플을 참조하십시오:

var canvas = document.getElementById('Arc');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;

context.beginPath();
context.strokeStyle = 'red';
context.arc(centerX, centerY, 50, 0, Math.PI * 2);
context.stroke();

context.beginPath();
context.fillStyle = 'blue';
context.moveTo(centerX, centerY)
context.arc(centerX, centerY, 50, 0, Math.PI * 0.5);
context.fill()

context.beginPath();
context.fillStyle = 'black';
context.moveTo(centerX, centerY)
context.arc(centerX, centerY, 45, Math.PI * 1.6, Math.PI * 1.8);
context.fill()

context.beginPath();
context.fillStyle = 'lime';
context.arc(centerX, centerY, 51, Math.PI, Math.PI * 1.2);
context.arc(centerX, centerY, 95, Math.PI * 1.2, Math.PI, true);
context.fill()

context.beginPath();
context.fillStyle = 'green';
context.arc(centerX, centerY, 60, Math.PI * 1.8, Math.PI * 2.1);
context.arc(centerX, centerY, 95, Math.PI * 2.1, Math.PI * 1.8, true);
context.fill()

<canvas id="Arc"></canvas>

대단히 감사합니다! 는지 정확히 무엇을 하려고 했! :)

어떻게 특정한 공유의 조각 파이 차트에서?

질문

최고의 응답

다른 언어로

이 페이지는 다른 언어로되어 있습니다

이 카테고리에서 인기

인기 있는 질문에 이 카테고리