介绍 & lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title>扇形绘制& lt;/title>
& lt; style>
.shanxing{:相对;宽度:200 px;身高:200 px;border - radius: 100 px;背景颜色:黄色;
}
.sx1{:绝对;宽度:200 px;身高:200 px;变换:旋转(0度);剪辑:矩形(0 px 100 px 200 px 0 px);/*这个剪辑属性用来绘制半圆,在剪辑的矩形范围内的内容显示出来,使用剪辑属性,元素必须是绝对的*/border - radius: 100 px;background - color: # f00;/* -webkit-animation: an1 2 s无限线性;*/}
.sx2{:绝对;宽度:200 px;身高:200 px;变换:旋转(0度);剪辑:矩形(0 px 100 px 200 px 0 px);border - radius: 100 px;background - color: # f00;/* -webkit-animation: an2 2 s无限线性;*/}/*绘制一个60度扇形*/.shanxing1 .sx1{变换:旋转(-30度);}.shanxing1 .sx2{变换:旋转(-150度);}/*绘制一个85度扇形*/.shanxing2 .sx1{变换:旋转(-45度);}.shanxing2 .sx2{变换:旋转(-140度);}/*绘制一个向右扇形,90度扇形*/.shanxing3 .sx1{变换:旋转(45度);}.shanxing3 .sx2{变换:旋转(-45度);}/*绘制一个颜色扇形*/.shanxing4 .sx1{变换:旋转(45度);background - color: # fff;} .shanxing4 .sx2{变换:旋转(-45度);background - color: # fff;}/*绘制一个不同颜色半圆夹角*/.shanxing5 .sx1{变换:旋转(45度);background - color: # f00;} .shanxing5 .sx2{变换:旋转(-45度);background - color: # 0 f0;}
& lt;/圣
& lt;/head>
& lt; body>扇形制作原理,底部一个纯色原形,里面2个相同颜色的半圆,可以是白色,内部半圆按一定角度变化,就可以产生出扇形效果& lt; p>/绘制一个60度扇形/& lt;/p>
& lt; div类=皊hanxing shanxing1"比;
& lt; div类=皊x1"祝辞& lt;/div>
& lt; div类=皊x2"祝辞& lt;/div>
& lt;/div>
& lt; p>/*绘制一个85度扇形*/& lt;/p>
& lt; div类=皊hanxing shanxing2"比;
& lt; div类=皊x1"祝辞& lt;/div>
& lt; div类=皊x2"祝辞& lt;/div>
& lt;/div>
& lt; p>/*绘制一个向右扇形,90度扇形*/& lt;/p>
& lt; div类=皊hanxing shanxing3"比;
& lt; div类=皊x1"祝辞& lt;/div>
& lt; div类=皊x2"祝辞& lt;/div>
& lt;/div>
& lt; p>/*绘制一个颜色扇形*/& lt;/p>
& lt; div类=皊hanxing shanxing4"比;
& lt; div类=皊x1"祝辞& lt;/div>
& lt; div类=皊x2"祝辞& lt;/div>
& lt;/div>
& lt; p>/*绘制一个不同颜色半圆夹角*/& lt;/p>
& lt; div类=皊hanxing shanxing5"比;
& lt; div类=皊x1"祝辞& lt;/div>
& lt; div类=皊x2"祝辞& lt;/div>
& lt;/div>
& lt;/body>
& lt;/html> & lt;/pre> & lt; % @页面语言=癹ava"进口=癹ava.util。*”;pageEncoding=皍tf-8" %比;
& lt; %
字符串路径=request.getContextPath ();字符串basePath=request.getScheme () +“://? request.getServerName () +“:“+ request.getServerPort() +路径“/?%比;
& lt; !DOCTYPE HTML公众“-//W3C//DTD HTML 4.01过渡//EN"比;
& lt; html>
& lt; head>
& lt; https://www.yisu.com/zixun/基地href=" ">
<标题>圆
<风格type=" text/css "> # myCanvas{} #你好{:绝对;上图:10 px;z - index: 1;
}>
<帆布id=" myCanvas "宽度=" 300 "高度=" 150 "风格=氨呔?1 px固体# d3d3d3;”>不是suopport帆布画布
<脚本>
var文本=. getelementbyid(“你好”);
text.innerHTML=" woshiwuxinguo”;var=0.9;//这里默认设置好评率为90%
var c=. getelementbyid (“myCanvas”);var ctx=c.getContext (2 d);
ctx.开始路径（）：
ctx.lineWidth=10;
ctx.strokeStyle=盎疑?
ctx.arc (100、75、50 0 2 * Math.PI);
ctx.fillStyle=" # FBFBFB”;
ctx.fill ();
ctx.笔画（）：
ctx.开始路径（）：
ctx.translate (100、75);
ctx.rotate (-90 * Math.PI/180);
ctx.strokeStyle=" # FFCFCF”;
50 ctx.arc (0, 0, 0 2 * Math.PI *我);
ctx.笔画（）：
c。addEventListener(鼠标悬停,函数(e) {
ctx.开始路径（）：
ctx.strokeStyle=盎疑?
50 ctx.arc (0, 0, 0 2 * Math.PI);
ctx.stroke ();var=我完成;var一步=0;var=setInterval(内部函数(e) {
console.log(“一步:”+步骤);如果(步骤
小编给大家分享一下CSS实现任意角度扇形的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
扇形制作原理,底部一个纯色原形,里面2个相同颜色的半圆,可以是白色,内部半圆按一定角度变化,就可以产生出扇形效果
下面这个是结合css + html5 + javascript的一个更复杂的圆环图形
