html扇形调节角度,如何使用CSS绘制任意角度的扇形

扇形制作原理，底部一个纯色原形，里面2个相同颜色的半圆，可以是白色,内部半圆按一定角度变化，就可以产生出扇形效果，下面就介绍如何使用CSS绘制任意角度的扇形。

扇形绘制

.shanxing{

position: relative;

width: 200px;

height: 200px;

border-radius: 100px;

background-color: yellow;

}

.sx1{

position: absolute;

width: 200px;

height: 200px;

transform: rotate(0deg);

clip: rect(0px,100px,200px,0px); /*这个clip属性用来绘制半圆，在clip的rect范围内的内容显示出来，使用clip属性，元素必须是absolute的 */

border-radius: 100px;

background-color: #f00;

/*-webkit-animation: an1 2s infinite linear; */

}

.sx2{

position: absolute;

width: 200px;

height: 200px;

transform: rotate(0deg);

clip: rect(0px,100px,200px,0px);

border-radius: 100px;

background-color: #f00;

/*-webkit-animation: an2 2s infinite linear;*/

}

/*绘制一个60度扇形*/

.shanxing1 .sx1{transform: rotate(-30deg);}

.shanxing1 .sx2{transform: rotate(-150deg);}

/*绘制一个85度扇形*/

.shanxing2 .sx1{transform: rotate(-45deg);}

.shanxing2 .sx2{transform: rotate(-140deg);}

/*绘制一个向右扇形，90度扇形*/

.shanxing3 .sx1{transform: rotate(45deg);}

.shanxing3 .sx2{transform: rotate(-45deg);}

/*绘制一个颜色扇形 */

.shanxing4 .sx1{transform: rotate(45deg);background-color: #fff;}

.shanxing4 .sx2{transform: rotate(-45deg);background-color: #fff;}

/*绘制一个不同颜色半圆夹角 */

.shanxing5 .sx1{transform: rotate(45deg);background-color: #f00;}

.shanxing5 .sx2{transform: rotate(-45deg);background-color: #0f0;}

扇形制作原理，底部一个纯色原形，里面2个相同颜色的半圆，可以是白色,内部半圆按一定角度变化，就可以产生出扇形效果

/*绘制一个60度扇形*/

/*绘制一个85度扇形*/

/*绘制一个向右扇形，90度扇形*/

/*绘制一个颜色扇形 */

/*绘制一个不同颜色半圆夹角 */

下面这个是结合css+html5+Javascript的一个更复杂的圆环图形

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

circle

#myCanvas{}

#nihao{

position: absolute;

top:10px;

z-index: 1;

}

not suopport canvas

var text=document.getElementById("nihao");

text.innerHTML="woshiwuxinguo";

var i=0.9;//这里默认设置好评率为90%

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.beginPath();

ctx.lineWidth=10;

ctx.strokeStyle="gray";

ctx.arc(100,75,50,0,2*Math.PI);

ctx.fillStyle="#FBFBFB";

ctx.fill();

ctx.stroke();

ctx.beginPath();

ctx.translate(100,75);

ctx.rotate(-90*Math.PI/180);

ctx.strokeStyle="#FFCFCF";

ctx.arc(0,0,50,0,2*Math.PI*i);

ctx.stroke();

c.addEventListener("mouseover", function(e) {

ctx.beginPath();

ctx.strokeStyle="gray";

ctx.arc(0,0,50,0,2*Math.PI);

ctx.stroke();

var finish=i;

var step=0;

var internal=setInterval(function(e) {

console.log("step:"+step);

if(step

step=step+0.01;

ctx.beginPath();

ctx.strokeStyle="#FFCFCF";

ctx.arc(0,0,50,0,2*Math.PI*step);

ctx.stroke();

}else{

clearInterval(internal);

}

}, 0.5)

}, true)