使用css3畫餅圖

CSS3 Gradient介紹參考地址：

http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html

http://www.zhangxinxu.com/wordpress/?p=3639

 

效果圖：

 

 

 

html:

<div class="colorWheel">
    <div class="piece"></div>
</div>

css:

.colorWheel {
  position: relative;
  width: 16em;
  height: 16em;
  background: linear-gradient(36deg, #7c1 42%, transparent 42%),linear-gradient(72deg, #999 75.48%, transparent 75.48% ),linear-gradient(-36deg, #479bf6 42%, transparent 42%) 100% 0,linear-gradient(-72deg, yellow 75.48%, transparent 75.48%) 100% 0,linear-gradient(-36deg, transparent 58%, #643 58%) 0 100%,linear-gradient(-72deg, transparent 24.52%, #8a1 24.52%) 0 100%,linear-gradient(36deg, transparent 58%, #90a 42%) 100% 100%,linear-gradient(72deg,transparent 24.52%, #099 24.52%) 100% 100%,#43a1cd linear-gradient(#ba3e2e, #ba3e2e) 50% 0;
  background-repeat: no-repeat;
  background-size: 50% 50%;
  border:1px solid #ccc;
  border-radius: 50%;
  margin: 30px;
}
.piece{
  position: absolute;
  left: 8%;
  top: -2.6%;
  width: 100%;
  height: 100%;
  background: linear-gradient(-36deg, #5454E3 42%, transparent 42%) 100% 0;
  background-repeat: no-repeat;
  background-size: 50% 50%;
  border-radius: 50%;
}

　　

---

多次對background設置linear-gradient值，已看暈。。。

那些角度和百分比究竟如何設置？

那塊餅又是怎么被分出去的？

請看以下分析：

 

以背景中第一條liear-gradient設置為例：

background:linear-gradient(36deg,#ff0 42%, transparent 42% );

效果圖如下：

　　

第一個參數為角度，如圖中將圓分為10等分，那么角度為360/10=36°，“度”用deg表示。

為了出現顏色驟停的直線而不是漸變色，在顏色過渡位置使用了屬性值transparent。

百分比計算的是顏色所占整個區域的面積，計算公式為：100*sin36/(sqrt(2)*cos9)

     sin36 中的36指每個色塊的占圓心角角度為36°；

     cos9 中的9用45-36計算得來。

如果每個色塊中圓心角的度數為α, 計算面積公式轉化為 100*sinα/(sqrt(2)*cos(45-α))

公式來源：

與梯度垂直的線上的所有點的顏色。從第三象限的頂點引出的垂直與梯度的直線是0% line，從第一象限的頂點引出的垂直線是100% line。畫一條經過原點、且與0% line和100% line垂直的直線，與0% line交點為S，與100% line交點為E，在長方形內任取一點P，假設這點在顏色變化的分界線上，從點P做一條垂直於直線SE的線，垂點為I；線段SI和SE的比值為P點所在分界線分開的面積占整個面積的比例。

 

 

更直觀的線條圖，為了畫圓截取的是正方形空間，有木有很熟悉的感覺。。。

連接AB點，過點A作垂直於PI的直線交於D點，則AD長度等於IS長度。

設正方形邊長為a，則OB長度為a*sqrt(2)/2;

由數學知識可得，∠MOE=36°，∠EOB=9°；則OE=cos9*a*sqrt(2)/2;

另，IS=AD=sin36*a;

則：IS/SB=IS/2OE=sin36/(cos9*sqrt(2));

以P為頂點，角度為α的形成的面積占正方形總面積的比例計算公式為：100*sinα/(sqrt(2)*cos(45-α))

說了這么一大堆，原來只用這個公式來計算就可以了呢。

 

再來一個例子驗證一下，將圓分為6等分：

每個色塊角度為：360/6=60，

每個色塊占所在正方形的面積比例為：100*sin60/(sqrt(2)*cos(45-60))，強大的js已經有這些常用數學公式的算法，Math.sin()和Math.cos()的參數均為弧度，將角度轉化為弧度公式：弧度=角度*Π/180,代入上面公式，在瀏覽器調試面板中輸入計算， 100*Math.sin(60*Math.PI/180)/(Math.sqrt(2)*Math.cos(-15*Math.PI/180))=63.4；

html：

<div class="sixWheel"></div>

css：

.sixWheel{
  width:12rem;
  height:12rem;
  margin-left: 50px;
  background: linear-gradient(60deg, #93f 63.4%, transparent 63.4%), linear-gradient(-60deg, #3f9 63.4%, transparent 63.4%) 100% 0, linear-gradient(-60deg, transparent 36.6%, #f63 36.6%) 0 100%, linear-gradient(60deg, transparent 36.6%, #69c 36.6%, #69c) 100% 100%, #ff9 linear-gradient(#39f, #39f) 50% 0;
  background-repeat: no-repeat;
  background-size: 50% 50%;
  border-radius: 50%;
}

效果圖：

　　

至此，餅已畫完。

 

那切出來的一塊又該怎么寫呢？

 

見第一個栗子中的.piece元素，讓這個元素和其父級元素.colorWheel有相同大小，只給這個元素中需要分出來的部分設置背景色，設置方法同上。控制.piece的位置，可實現被切分出去效果。

怎樣移動位置才能使被切分的塊與兩側的塊距離相同是重點。要求的是下圖中OA（橫向移動距離）和AC（縱向移動距離）的長度。

　　

如圖示，假設OM和ON圍成銳角為原區域，CE和CF圍成的銳角為移動后區域，因為CE到OM的距離等於CF到ON的距離，過C點，作垂直於OM的直線交點為B點，作垂直與ON的直線交點為A點，則CB=CA。由此得出∠BOC=∠COA。

若∠AOB=36°，則∠AOC=18°。AC/OA=tan∠AOC。

 

所以，.piece橫向移動位置和縱向移動位置的比例為tan(α/2)。

 

文章是由看了文章Dig Deep Into CSS Linear Gradients引出的, 文中部分圖片來自此文中圖片，強烈推薦看原文！！！