Estoy haciendo un gráfico de anillos con lienzo HTML.
Tiene 550 colores diferentes para mostrar.
Mi pregunta es: ¿cómo asegurarme de que el primer color de la matriz se muestre en la parte superior?
lenArr es una matriz de 550 valores. todos los valores son "1"
rgbArr es una matriz de 550 colores en códigos hexadecimales.
var canvas = document.getElementById("chart"); var chart = canvas.getContext("2d"); function drawdountChart(canvas) { this.x, this.y, this.radius, this.lineWidth, this.strockStyle, this.from, this.to = null; this.set = function(x, y, radius, from, to, lineWidth, strockStyle) { this.x = x; this.y = y; this.radius = radius; this.from = from; this.to = to; this.lineWidth = lineWidth; this.strockStyle = strockStyle; } this.draw = function(data) { canvas.beginPath(); canvas.lineWidth = this.lineWidth; canvas.strokeStyle = this.strockStyle; canvas.arc(this.x, this.y, this.radius, this.from, this.to); canvas.stroke(); var numberOfParts = data.numberOfParts; var parts = data.parts.pt; var colors = data.colors.cs; var df = 0; for (var i = 0; i < numberOfParts; i++) { canvas.beginPath(); canvas.strokeStyle = colors[i]; canvas.arc(this.x, this.y, this.radius, df, df + (Math.PI * 2) * (parts[i] / 100)); canvas.stroke(); df += (Math.PI * 2) * (parts[i] / 100); } } } var drawDount = new drawdountChart(chart); drawDount.set(60, 60, 40, 0, Math.PI * 2, 40, "#000"); var data = { numberOfParts: 550, parts: { "pt": [20,20,20,20,20] }, //percentage of each parts colors: { "cs": ["red", "blue", "yellow", "pink", "cyan"] } //color of each part }; drawDount.draw(data); <canvas id="chart"></canvas>No está utilizando el parámetro from en su código para dibujar los arcos de color...
A continuación, simplifiqué su código para que encaje mejor en el fragmento, como puede ver, estoy usando from como el valor inicial var df = from; y ahí es donde comienza el primer color, si desea que comience en la parte superior, puede usar: Math.PI*1.5 en mi muestra a continuación, estoy dibujando múltiples que muestran diferentes valores en el desde.
var canvas = document.getElementById("chart"); var chart = canvas.getContext("2d"); function drawdountChart(canvas) { this.draw = function(x, y, radius, from, lineWidth, data) { canvas.lineWidth = lineWidth; var parts = data.parts.pt; var df = from; for (var i = 0; i < data.numberOfParts; i++) { canvas.beginPath(); canvas.strokeStyle = data.colors.cs[i]; canvas.arc(x, y, radius, df, df + (Math.PI * 2) * (parts[i] / 100)); canvas.stroke(); df += (Math.PI * 2) * (parts[i] / 100); } } } var data = { numberOfParts: 550, parts: { "pt": [20, 20, 20, 20, 20] }, //percentage of each parts colors: { "cs": ["red", "blue", "yellow", "pink", "cyan"] } }; var drawDount = new drawdountChart(chart); drawDount.draw( 50, 60, 25, 0 , 40, data); drawDount.draw(140, 60, 25, Math.PI , 40, data); drawDount.draw(230, 60, 25, Math.PI*1.5 , 40, data); <canvas id="chart"></canvas>