canvas 画绕圆心旋转的扇形
程序员文章站
2024-03-24 10:59:16
...
先看效果图(为了颜色对比明显,搭配的颜色比较丑,大家可根据项目修改颜色):
上代码:
(1)css部分:
.middleCircle {
display: flex;
align-items: center;
justify-content: center;
width: 13rem;
height: 13rem;
border-radius: 50%;
border: 3px solid #098fb7;
margin: 117px;
}
(2)html 部分:
<div class="middleCircle">
<canvas id="mycanvas" width="260" height="260">
您的浏览器不支持html5dcanvas元素
</canvas>
</div>
(3)js 部分(需引入JQ,也可将JQ写法改成原生写法):
var canvas=$('#mycanvas');//定义变量获取画布dom
var c=mycanvas.getContext('2d');//设置绘图环境2d
c.lineWidth=4;//设置线宽
c.strokeStyle="rgba(206, 118, 83, 0.8)"; //设置边颜色
c.fillStyle="rgba(206, 118, 83, 0.8)"; //扇形
c.moveTo(130,130);
c.arc(130,130,130,Math.PI*5/6,Math.PI*1.5,false);
c.moveTo(130,130);
c.arc(130,130,130,Math.PI*7/6,Math.PI*1.5,false);
c.fill()
c.beginPath();
c.lineWidth=3;
c.strokeStyle="rgba(217, 242, 245, 0.5)";
var waitTime = 1;
var waitInterval = setInterval(() => { // 让扇形转动
waitTime++;
$('#mycanvas').css("transform", "rotate("+ waitTime +"deg)");
}, 100)
上一篇: css画扇形的学习记录