只記錄了大致方案，具體百分比計(jì)算方法請(qǐng)自行處理。
1、svg 實(shí)現(xiàn)
<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 實(shí)現(xiàn)
<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實(shí)現(xiàn)
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') //獲取畫圖環(huán)境，指明為2d
? ? centerX = canvas.width / 2 //Canvas中心點(diǎn)x軸坐標(biāo)
? ? centerY = canvas.height / 2 //Canvas中心點(diǎn)y軸坐標(biāo)
? ? //加載的快慢就靠它了
? ? 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像素寬的運(yùn)動(dòng)外圈
? blueCircle = () => {
? ? context.save()
? ? context.strokeStyle = '#fff' //設(shè)置描邊樣式
? ? context.lineWidth = 5 //設(shè)置線寬
? ? context.beginPath() //路徑開始
? ? context.arc(centerX, centerY, 100, 0, 360)
? ? context.stroke() //繪制
? ? context.closePath() //路徑結(jié)束
? ? context.restore()
? }
? //繪制白色外圈
? whiteCircle = () => {
? ? context.save()
? ? context.beginPath()
? ? context.lineWidth = 2 //設(shè)置線寬
? ? 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
