Cum pentru a umple o anumită cotă de felii într-o diagramă radială?

Question 1

Încerc să reproduc un astfel de grafic:

Ceea ce am încercat să dau seama cum de a umple un anumit procent din felii în mijlocul diagramei dar, de asemenea, cum să umple gogoașă grafic în același fel.

Am încercat să folosească fillRect() dar asta nu umple feliile cum am vrut. Lasă-mă să știu dacă aveți orice idei despre cum am putea obține un grafic similar cu cea pe care am prezentat-o mai sus.

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

La fillRect este doar un dreptunghi, dacă o plăcintă este ceea ce ai nevoie le putem face cu arce de cerc.

Plăcinte, care începe de la centrul cercului, ne-am muta la centru apoi trage arce și să le umple, pentru gogoașă plăcinte trebuie să facem două arce în direcții opuse și diferite rază și de apel fill()

vedea mostre de mai jos:

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

La fillRect este doar un dreptunghi, dacă o plăcintă este ceea ce ai nevoie le putem face cu arce de cerc.

Plăcinte, care începe de la centrul cercului, ne-am muta la centru apoi trage arce și să le umple, pentru gogoașă plăcinte trebuie să facem două arce în direcții opuse și diferite rază și de apel fill()

vedea mostre de mai jos:

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>

Vă mulțumesc foarte mult! Asta e exact ceea ce am încercat să fac! :)

Cum pentru a umple o anumită cotă de felii într-o diagramă radială?

Problema

Cel mai bun răspuns

În alte limbi

Această pagină este în alte limbi

Popular în această categorie

Întrebări frecvente în această categorie