CSS - 如何创建圆形饼图画布这样？ [英] CSS - how to create circle pie canvas like this?

问题描述

我真的很喜欢这个元素，

I really like this element,

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

but how to create it? I am not sure what's the correct designation of the element...

非常感谢。

推荐答案

这种效果可以通过分层几个 arc（） s来实现：

This effect can be achieved by layering a couple arc()s:

// 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);

小提琴：http://jsfiddle.net/j6NVg/

这篇关于CSS - 如何创建圆形饼图画布这样？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！