Comment remplir une certaine part de tranches dans un graphique en secteurs?

Question 1

Je suis en train de reproduire ce graphique:

Ce que j'essaie de savoir comment remplir un certain pourcentage des tranches dans le milieu pour le graphique, mais aussi la façon de remplir le graphique en anneau de la même manière.

J'ai essayé d'utiliser fillRect (), mais qui ne remplissent pas les tranches de la façon dont je voulais. Laissez-moi savoir si vous avez des idées de comment je pourrais obtenir un graphique similaire à celui que j'ai présenté ci-dessus.

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

Le fillRect est juste un rectangle, si la tarte est ce que vous avez besoin, nous pouvons faire ceux avec des arcs.

Les tartes qui démarrent à partir du centre du cercle, nous venons de se déplacer vers le centre puis dessiner les arcs et les remplir, pour le beignet tartes que nous avons à faire à deux arcs dans des directions opposées et différentes rayon et appel fill()

voir les exemples ci-dessous:

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

Le fillRect est juste un rectangle, si la tarte est ce que vous avez besoin, nous pouvons faire ceux avec des arcs.

Les tartes qui démarrent à partir du centre du cercle, nous venons de se déplacer vers le centre puis dessiner les arcs et les remplir, pour le beignet tartes que nous avons à faire à deux arcs dans des directions opposées et différentes rayon et appel fill()

voir les exemples ci-dessous:

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>

Merci beaucoup! C'est exactement ce que je cherchais à faire! :)

Comment remplir une certaine part de tranches dans un graphique en secteurs?

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie