本文介绍了一个使用jQuery插件实现的圆形指示器radialIndicator的样式修改方法，包括背景颜色、指示条颜色、字体大小等设置，并展示了如何通过JavaScript代码初始化该组件。
圆形指示器radialIndicator修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改后的圆形指示器</title>
<style>
.cicle {
width: 400px;
height: 400px;
background: #e3e3e3;
margin: 200px auto;
line-height: 400px;
text-align: center;
}
</style>
</head>
<body>
<div class="cicle"></div>
<!-- 引入插件 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/radialIndicator.js"></script>
<script type="text/javascript">
$('.cicle').radialIndicator({
barBgColor:'#959595',
barColor: '#02b7fb',
radius:45,
barWidth:15,
initValue: 40,
roundCorner: false,
percentage: true,
fontSize: 18,
fontColor: '#02b7fb'
})
</script>
</body>
</html>
插件部分修改
//draw a grey circle
ctx.strokeStyle = indOption.barBgColor; //background circle color
ctx.lineWidth = indOption.barWidth;
ctx.beginPath();
ctx.arc(center, center, indOption.radius,Math.PI * 0.7, 2 * Math.PI);
//画圆时修改圆的坐标，结束坐标Math.PI * 0.7，启示坐标2 * Math.PI
ctx.stroke();
扫一扫
853
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
