vue3使用canvas写一个圆形的音乐播放进度条
时间: 2024-05-10 12:17:32 浏览: 6
好的,以下是一个使用Vue3和Canvas实现的圆形音乐播放进度条的示例代码:
```html
<template>
<div class="progress-bar">
<canvas ref="canvas" width="200" height="200"></canvas>
<div class="progress-value">{{ progress }}%</div>
</div>
</template>
<script>
import { onMounted, onUnmounted, reactive } from 'vue'
export default {
setup() {
const canvasRef = ref(null)
const progress = reactive({ value: 0 })
let canvas, ctx, radius, center
// 绘制进度条
const drawProgressBar = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.lineWidth = 10
ctx.strokeStyle = '#ccc'
ctx.beginPath()
ctx.arc(center, center, radius, 0, 2 * Math.PI)
ctx.stroke()
ctx.lineWidth = 10
ctx.strokeStyle = '#f00'
ctx.beginPath()
ctx.arc(center, center, radius, -Math.PI / 2, Math.PI * 2 * progress.value / 100 - Math.PI / 2)
ctx.stroke()
ctx.fillStyle = '#f00'
ctx.beginPath()
ctx.arc(center, center, radius - 20, 0, 2 * Math.PI)
ctx.fill()
}
// 初始化画布和进度条
const init = () => {
canvas = canvasRef.value
ctx = canvas.getContext('2d')
radius = canvas.width / 2 - 10
center = canvas.width / 2
drawProgressBar()
}
// 监听进度变化
const updateProgress = (value) => {
progress.value = value
drawProgressBar()
}
onMounted(() => {
init()
})
onUnmounted(() => {
canvas = null
ctx = null
})
return {
canvasRef,
progress,
updateProgress
}
}
}
</script>
<style>
.progress-bar {
position: relative;
width: 200px;
height: 200px;
}
.progress-value {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
font-weight: bold;
}
</style>
```
在上面的代码中,我们使用了Vue3的`setup`函数来定义组件的逻辑。首先,我们使用`ref`函数创建了一个引用,它指向`canvas`元素。然后我们使用`reactive`函数创建了一个响应式数据对象`progress`,它包含一个`value`属性,用来表示进度条的进度。接着我们定义了一些变量和函数来初始化和绘制进度条,并且在组件挂载和卸载时分别执行了它们。最后,我们返回了一些数据和方法,让其他组件可以使用它们来更新进度条的进度。
在模板中,我们使用了`canvas`元素来绘制进度条。我们还添加了一个表示进度百分比的文本,它使用了CSS来进行定位和样式设置。
在组件中,我们通过监听音乐播放进度的变化来更新进度条的进度。具体的实现方式可以根据你的需要进行调整。例如,你可以在`mounted`钩子中添加一个计时器,来定期更新进度条的进度。