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>

效果如下:

相关推荐
陌小呆^O^11 分钟前
Cmakelist.txt之win-c-udp-client
c语言·开发语言·udp
dr李四维13 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_27 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~34 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
重生之我是数学王子37 分钟前
QT基础 编码问题 定时器 事件 绘图事件 keyPressEvent QT5.12.3环境 C++实现
开发语言·c++·qt
℘团子এ37 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
Ai 编码助手39 分钟前
使用php和Xunsearch提升音乐网站的歌曲搜索效果
开发语言·php
学习前端的小z43 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
神仙别闹1 小时前
基于C#和Sql Server 2008实现的(WinForm)订单生成系统
开发语言·c#
XINGTECODE1 小时前
海盗王集成网关和商城服务端功能golang版
开发语言·后端·golang