圆形进度条
只记录了大致方案，具体百分比计算方法请自行处理。
1、svg 实现
<svg width="36" height="36" viewport="0 0 100 100" className={styles.circle} >
<circle r="16" cx="18" cy="18" fill="transparent" stroke="#d8d8d8" strokeWidth="2" />
<circle r="16" cx="18" cy="18" fill="transparent" stroke="#0084ff" strokeWidth="2"
stroke-dashArray={Math.PI * 32} strokeDashoffset={(1 - 0.1) * Math.PI * 32} />
</svg>
2、css 实现
<div className={styles.circleProgressWrapper}>
<div className={cx(styles.wrapper, {[styles.left]: true})}>
<div className={cx(styles.circleProgress, {[styles.leftcircle]: true })} />
</div>
<div className={cx(styles.wrapper, {[styles.right]: true})}>
<div className={cx(styles.circleProgress, { [styles.rightcircle]: true, })} />
</div>
</div>
.circleProgressWrapper {
width: 200px;
height: 200px;
position: relative;
}
.wrapper {
width: 100px;
height: 200px;
position: absolute;
top: 0;
overflow: hidden;
}
.right {
right: 0;
}
.left {
left: 0;
}
.circleProgress {
width: 160px;
height: 160px;
border: 20px solid transparent;
border-radius: 50%;
position: absolute;
top: 0;
transform: rotate(45deg);
}
.rightcircle {
border-bottom: 20px solid green;
border-left: 20px solid green;
transform: rotate(65deg);
right: 0;
}
.leftcircle {
border-top: 20px solid green;
border-right: 20px solid green;
left: 0;
}
3、canvas实现
import React, {Component} from 'react'
import cx from 'classnames'
import styles from './PlayProgressCircle.css'
let context = ''
let centerX = ''
let centerY = ''
let rad = 0
class PlayProgressCircle extends Component {
componentDidMount() {
if (!this.canvasContainer) {
return
}
const canvas = this.canvasContainer //获取canvas元素
context = canvas.getContext('2d') //获取画图环境，指明为2d
centerX = canvas.width / 2 //Canvas中心点x轴坐标
centerY = canvas.height / 2 //Canvas中心点y轴坐标
//加载的快慢就靠它了
this.drawFrame()
setInterval(() => {
rad += 0.1
if (rad > 1) {
rad = 0
}
context.clearRect(0, 0, canvas.width, canvas.height);
this.drawFrame()
}, 1000)
}
drawFrame = () => {
this.blueCircle()
this.whiteCircle()
}
//绘制5像素宽的运动外圈
blueCircle = () => {
context.save()
context.strokeStyle = '#fff' //设置描边样式
context.lineWidth = 5 //设置线宽
context.beginPath() //路径开始
context.arc(centerX, centerY, 100, 0, 360)
context.stroke() //绘制
context.closePath() //路径结束
context.restore()
}
//绘制白色外圈
whiteCircle = () => {
context.save()
context.beginPath()
context.lineWidth = 2 //设置线宽
context.strokeStyle = 'red'
context.arc(centerX, centerY, 100, 0, rad * 2 * Math.PI, false)
context.stroke()
context.closePath()
context.restore()
}
render() {
return (
<div className={styles.root}>
<canvas
ref={el => (this.canvasContainer = el)}
width="500"
height="500"
/>
</div>
)
}
}
export default PlayProgressCircle
