CSS怎样实现任意角度的扇形（代码示例）-百分百源码网

CSS怎样实现任意角度的扇形（代码示例）

发布时间：08/01 来源：未知浏览：关键词：

?本篇文章给大家带来的内容是对于CSS怎样实现任意角度的扇形（代码示例），有一定的参照价值，有需要的伴侣可以参照一下，但愿对你有所帮忙。本篇文章给大家带来的内容是对于CSS怎样实现任意角度的扇形（代码示例），有一定的参照价值，有需要的伴侣可以参照一下，但愿对你有所帮忙。

扇形制作道理，底部一个纯色真相，里面2个雷同色彩的半圆，可以是白色,内部半圆按一定角度变化，就可以发生出扇形结果



    
    扇形绘制
    
  




《script》
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("mou搜索引擎优化ver", 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

以上就是CSS怎样实现任意角度的扇形（代码示例）的细致内容，更多请关注百分百源码网其它相干文章！

打赏