Cómo dividir un círculo en diferentes partes con diferentes colores usando el lienzo HTML5

No soy muy fanático de Canvas, sino de SVG.

Y D3.js es muy bueno para crear documentos controlados por datos. Entonces, para un círculo / pastel como el anterior, solo necesita obtener datos aproximados y D3 creará un pastel para usted, que se demuestra aquí: Codepen: jyGMJJ

texto .arc {
fuente: 10px sans-serif;
ancla de texto: medio;
}

• Si estoy pensando en crear un servicio genial, ¿qué debo aprender? JavaScript u Objective-C (programación web versus programación de aplicaciones móviles), ¿y por qué?
• Cuando hablamos de JavaScript, ¿qué significa acoplamiento y desacoplamiento?
• ¿Cuál es la diferencia entre el código JavaScript colocado dentro de una etiqueta de encabezado y el código colocado fuera de una etiqueta de cuerpo?
• Cómo hacer una calculadora básica con JavaScript
• Cómo solicitar cookies de un sitio web en Python

.arc path {
trazo: #fff;
}

ancho var = 960,
altura = 500,
radio = Math.min (ancho, alto) / 2;

var color = d3.scale.ordinal ()
.range ([“# 98abc5”, “# 8a89a6”, “# 7b6888”, “# 6b486b”, “# a05d56”, “# d0743c”, “# ff8c00”]);

var arco = d3.svg.arc ()
.outerRadius (radio – 10)
.Radio interno (0);

var labelArc = d3.svg.arc ()
.outerRadius (radio – 40)
.innerRadius (radio – 40);

var pie = d3.layout.pie ()
.sort (nulo)
.value (function (d) {return d;});

var svg = d3.select (“# pie”). append (“svg”)
.attr (“ancho”, ancho)
.attr (“altura”, altura)
.append (“g”)
.attr (“transformar”, “traducir (” + ancho / 2 + “,” + alto / 2 + “)”);

función draw (datos) {
var g = svg.selectAll (“. arc”)
.data (pie (datos))
.enter (). append (“g”)
.attr (“clase”, “arco”);

g.append (“ruta”)
.attr (“d”, arco)
.style (“fill”, function (d) {return color (d.data * Math.random ());});

}

var randomValuedArray = function (length, max) {
return Array.apply (null, Array (length)). map (function (_, i) {
return Math.round (Math.random () * max);
});
}
var fixedValuedArray = function (longitud, relleno) {
return Array.apply (null, Array (length)). map (function (_, i) {
relleno de retorno
});
}
// draw (randomValuedArray (16, 15)); // Descomenta esta línea para ver arcos de longitud aleatoria
draw (fixedValuedArray (16, 15));