vue倒计时时间实现圆形进度条_在vue组件里面如何用canvas实现圆形倒计时效果？...

圆环用svg更简洁，效果好，参考张鑫旭的文章。

然后，实现倒计时，也就是圆环弧度的动态变化，理清思路就行了，

然而这些跟vue都没有任何关系，

如果要封装成vue组件，按照vue组件规范就行了(模版，样式，逻辑)。

最后，贴一个之前写的圆环的vue组件,仅作参考：

:stroke="backgroundColor"

:stroke-width="width"

stroke-linecap="round"

fill="transparent">

class="ring"

:stroke-width="width"

:stroke="rate === 0 ? 'transparent': color"

:style="`stroke-dasharray: ${arc} ${per}`"

stroke-linecap="round"

fill="transparent">

import styleConfig from 'config/style'

export default {

computed: {

cx() { // 中心点位置

return this.size / 2

},

r() { // 半径

return this.size / 2 - this.width

},

per() { // 周长

return parseInt(this.r * Math.PI * 2)

},

arc() { // 弧长

return parseInt(this.per * (this.rate === 0 ? 0 : this.rate / 100))

}

},

props: {

size: {

type: Number,

default: 100

},

width: {

type: Number,

default: 5

},

rate: {

type: Number,

default: 0

},

color: {

type: String,

default: styleConfig.primaryColor

},

backgroundColor: {

type: String,

default: styleConfig.borderColor

}

}

}

@import "../../less/config";

.ring-container {

.ring {

transform: rotate(-89deg);

transform-origin: 50% 50%;

transition: all 1s;

}

}