html - CSS - 如何创建这样的圆形饼图 Canvas ？

Question

我很喜欢这个元素，

但是如何创建呢？我不确定元素的正确名称是什么...

非常感谢。

Answer 1

这个效果可以通过分层几个 arc() 来实现:

// bright blue full circle
d.beginPath();
d.arc(50, 50, 50, 0, 2 * Math.PI, false);
d.fillStyle = "#aaeeff";
d.fill();

// dark blue percentage circle
d.beginPath();
d.moveTo(50, 50);
d.arc(50, 50, 50, -0.5 * Math.PI, 0.78 * 2 * Math.PI - 0.5 * Math.PI, false);
d.fillStyle = "#00aaff";
d.fill();

// white inner filler
d.beginPath();
d.moveTo(50, 50);
d.arc(50, 50, 25, 0, 2 * Math.PI, false);
d.fillStyle = "#ffffff";
d.fill();

最后渲染文本:

d.moveTo(50, 50);
d.fillStyle = "#606060";
d.font = "12pt sans-serif";
d.fillText("78%", 36, 56);

fiddle :http://jsfiddle.net/j6NVg/