0
224
Views¿Cómo llenar una determinada porción de sectores en un gráfico circular?
Estoy tratando de reproducir tal gráfico:
Lo que estoy tratando de averiguar es cómo llenar un cierto porcentaje de las porciones en el medio del gráfico circular, pero también cómo llenar el gráfico de anillos de la misma manera.
Intenté usar fillRect() pero eso no llenó las porciones como quería. Avíseme si tiene alguna idea de cómo podría obtener un gráfico similar al que presenté anteriormente.
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>1 answers
Answer question0
El fillRect es solo un rectángulo, si lo que necesita es un pastel, podemos hacerlo con arcos.
Los pasteles que comienzan desde el centro del círculo, simplemente nos movemos hacia el centro, luego dibujamos los arcos y los llenamos, para los pasteles de donas tenemos que hacer dos arcos en direcciones opuestas y diferentes radios y llamar a fill()
ver ejemplos a continuación:
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>