<template>
<view class="content">
<view class="sj-title" @click="loadProgress">点击</view>
<view>
<canvas style="width: 200px; height: 200px;" canvas-id="progressCanvas"></canvas>
</view>
</view>
</template>
<script>
export default {
data() {
return {
progress: 0,
};
},
mounted() {
this.loadProgress();
},
methods: {
loadProgress() {
// 清空画布
const ctx = uni.createCanvasContext('progressCanvas');
ctx.clearRect(0, 0, 200, 200);
ctx.lineWidth = 10;
ctx.strokeStyle = '#ececec';
ctx.beginPath();
ctx.arc(100, 100, 80, 0, 2 * Math.PI);
ctx.stroke();
ctx.strokeStyle = '#32b662';
ctx.beginPath();
// 绘制进度条
ctx.arc(100, 100, 80, -Math.PI / 2, Math.PI * this.progress / 100 * 2 - Math.PI / 2);
ctx.stroke();
ctx.draw();
// 更新进度
this.progress = this.progress + 20 > 100 ? 0 : this.progress + 20;
}
},
};
</script>
<style scoped>
page {
width: 100%;
height: 100%;
}
.content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(to bottom, #D4D9E4 0%, #F8F8F8 40%);
}
.sj-title {
font-size: 32rpx;
color: #181818;
margin: 40rpx 0;
}
</style>
uniapp做一个圆环进度条
最新推荐文章于 2024-06-06 20:56:55 发布