ยังไงต้องเติมบางอย่างแบ่งปังได้ชิ้นในแถบกำกับเส้น?

Question 1

ฉันกำลังพยายาม reproduce เป็นกราฟ:

สิ่งที่ฉันกำลังพยายามคิดให้ออกคือวิธีที่ต้องเติมบางอย่างโดยมีหน่วยเป็นเปอร์เซ็นต์ของได้ชิ้นในตอนกลางสำหรับคนอย่างงั้นแต่ก็ยังอยากจะบอกซื้อโดนัทอยู่ในชาร์ตแบบเดียวกัน

ฉันพยายามที่จะใช้ 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 เป็นสี่เหลี่ยม,ถ้าเป็นพายคือสิ่งที่คุณต้องการเราสามารถทำอย่างนั้นกับ arcs.

พายนั่นเริ่มจากศูนย์กลางของคนในวงเวทย์เราเพิ่งย้ายไปยังศูนย์กลางแล้ววาด arcs และแทนพวกเขาสำหรับโดนัทพายพวกเราต้องทำสองคน arcs อยู่ฝั่งตรงข้ามวไดเร็คชั่นส์แล้วก็แตกต่างภายในรัศและโทรเรียก 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 เป็นสี่เหลี่ยม,ถ้าเป็นพายคือสิ่งที่คุณต้องการเราสามารถทำอย่างนั้นกับ arcs.

พายนั่นเริ่มจากศูนย์กลางของคนในวงเวทย์เราเพิ่งย้ายไปยังศูนย์กลางแล้ววาด arcs และแทนพวกเขาสำหรับโดนัทพายพวกเราต้องทำสองคน arcs อยู่ฝั่งตรงข้ามวไดเร็คชั่นส์แล้วก็แตกต่างภายในรัศและโทรเรียก 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>

ขอบคุณมากครับ! นั่นคือสิ่งที่ฉันพยายามจะทำยังไง! :)

ยังไงต้องเติมบางอย่างแบ่งปังได้ชิ้นในแถบกำกับเส้น?

คำถาม

คำตอบที่ดีที่สุด

ในภาษาอื่นๆ

หน้านี้อยู่ในภาษาอื่นๆ

ดังอยู่ในนี้หมวดหมู่

ดังคำถามอยู่ในนี้หมวดหมู่