html扇形调节角度 CSS如何实现任意角度的扇形（代码示例）

本篇文章给大家带来的内容是关于CSS如何实现任意角度的扇形(代码示例)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

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

扇形绘制

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

/绘制一个60度扇形/

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

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

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

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

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

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

circle

}

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)