uni-app进度条

javascript 复制代码
<template>
	<view>
		<canvas canvas-id="ring" id="ring"  style="width: 200px; height: 180px;">
		        <!-- <p>抱歉,您的浏览器不支持canvas</p> -->
		</canvas>
	</view>
</template>

<script>
	export default{
		data() {
			return{
				
			}
		},
		props: {
			score: {
				type: Number
			}
		},
		mounted(){
			console.log( this.score,' this.score')
			setTimeout(co=>{
				this.circleProgressbar('ring', 200, 180, this.score)
			},500)
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
			circleProgressbar(canvasId, width, height, angle) {
				var context = uni.createCanvasContext(canvasId, this);
				
				// var context = wx.createCanvasContext(canvasId, this)
				// 外层圆环
				context.beginPath()
				context.arc(width / 2, height - 80, width / 2 - 20, 0.8 * Math.PI, 2.2 * Math.PI)
				context.setLineWidth(16)
				context.setLineCap('round')
				context.setStrokeStyle('rgba(255,255,255,0.1)')
				context.stroke()
	
				// 外层进度圆环
				context.beginPath()
				context.arc(width / 2, height - 80, width / 2 - 20, 0.8 * Math.PI, (1.4 * (angle / 100) + 0.8).toFixed(1) * Math.PI)
				context.setLineWidth(10)
				context.setLineCap('round')
				context.setStrokeStyle('#fff')
				context.stroke()
	
				// 指示器
				const xAxis = Math.cos(Math.PI * ((1.4 * (angle / 100) + 0.8).toFixed(1) - 0.005)) * (width / 2 - 20)
				const yAxis = Math.sin(Math.PI * ((1.4 * (angle / 100) + 0.8).toFixed(1) - 0.005)) * (width / 2 - 20)
				context.beginPath()
				context.arc(width / 2 + xAxis, height - 80 + yAxis, 10, 0, 2 * Math.PI)
				context.setFillStyle('#fff')
				context.fill()
				// 指示器内环
				const xInAxis = Math.cos(Math.PI * ((1.4 * (angle / 100) + 0.8).toFixed(1) - 0.005)) * (width / 2 - 20)
				const yInAxis = Math.sin(Math.PI * ((1.4 * (angle / 100) + 0.8).toFixed(1) - 0.005)) * (width / 2 - 20)
				context.beginPath()
				context.arc(width / 2 + xAxis, height - 80 + yAxis, 6, 0, 2 * Math.PI)
				context.setFillStyle('#2A8FFF')
				context.fill()
	
				// 文本
				const textY = Math.sin(Math.PI * 2 / 360 * (1.8 * (100 + 15))) * (width / 2 - 20)
				context.beginPath()
				context.setFillStyle('#fff')
				context.setFontSize(20)
				context.setTextAlign('center')
				context.setTextBaseline('middle')
				context.fillText('匹配度', width / 2, height - 20)
				context.font = `normal bold ${40}px sans-serif`;
				context.fillText(angle+"%", width / 2, height - 50 + textY)
	
				context.draw()
			},
		}
	}
	
</script>

效果如下:

相关推荐
懒大王爱吃狼27 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
秃头佛爷1 小时前
Python学习大纲总结及注意事项
开发语言·python·学习
待磨的钝刨2 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
XiaoLeisj3 小时前
【JavaEE初阶 — 多线程】单例模式 & 指令重排序问题
java·开发语言·java-ee
励志成为嵌入式工程师4 小时前
c语言简单编程练习9
c语言·开发语言·算法·vim
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
捕鲸叉5 小时前
创建线程时传递参数给线程
开发语言·c++·算法
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
A charmer5 小时前
【C++】vector 类深度解析:探索动态数组的奥秘
开发语言·c++·算法
Peter_chq5 小时前
【操作系统】基于环形队列的生产消费模型
linux·c语言·开发语言·c++·后端