css3 を使用して円グラフを描画する_html/css_WEB-ITnose

CSS3 グラデーション導入参考アドレス:

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%;}

背景にlinear-gradientの値を何度も設定してしまい、めまいがしてしまいました。 。 。

これらの角度とパーセンテージを設定するにはどうすればよいですか?

そのケーキはどうやって分けられましたか?

次の分析を参照してください:

例として、背景の最初の liear-gradient 設定を取り上げます:

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

レンダリングは以下の通りです:

最初のパラメータは角度で、図の円を 10 等分した場合、角度は 360/10=36°となり、「度」は度で表されます。

グラデーションではなく、突然色が止まる直線にするため、色の遷移位置に属性値transparentを使用しています。

パーセンテージの計算は、色が占める領域全体の面積です。計算式は次のとおりです: 100*sin36/(sqrt(2)*cos9)

sin36 の 36 は、各カラー ブロックの中心角を意味します。 cos9 の

9 は 45-36 を使用して計算されます。

各カラーブロックの中心角の度数をαとすると、面積を求める式は100*sinα/(sqrt(2)*cos(45-α))に変換されます

計算式出典：

とグラデーション 垂直線上のすべての点の色。第 3 象限の頂点から引いた勾配に垂直な直線が 0% ライン、第 1 象限の頂点から引いた垂直線が 100% ラインになります。原点を通り、0% 線と 100% 線に垂直な直線を描きます。0% 線との交点を S、100% 線との交点を E とします。範囲内の任意の点 P を選択します。この点が色の変化のときの長方形であり、点 P から直線 SE に垂直な線を引き、その垂線を I とします。点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（縦方向の移動距離）の長さです。

図に示すように、CEからOMまでの距離とCFからONまでの距離が等しいため、元の領域としてOMとONが鋭角を形成し、移動領域としてCEとCFが鋭角を形成すると仮定します。 . 点Cを通過後、OMに垂直な線を引き、直線の交点を点B、垂直直線とON直線の交点を点Aとすれば、CB=CAとなります。したがって、∠BOC=∠COA となります。

∠AOB=36°の場合、∠AOC=18°です。 AC/OA=tan∠AOC。

したがって、駒の水平方向の移動位置と垂直方向の移動位置の比はtan(α/2)となります。

この記事は、「CSS Linear Gradients を深く掘り下げる」という記事を読んだことに影響を受けています。記事内の一部の写真は、この記事の写真からのものです。元の記事を読むことを強くお勧めします。 ！ ！