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>

效果如下:

相关推荐
朝阳5815 分钟前
Rust项目GPG签名配置指南
开发语言·后端·rust
朝阳5816 分钟前
Rust实现高性能目录扫描工具ll的技术解析
开发语言·后端·rust
程高兴7 分钟前
基于Matlab的车牌识别系统
开发语言·matlab
鸿蒙布道师14 分钟前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚19 分钟前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
曹牧22 分钟前
HTML字符实体和转义字符串
前端·html
小希爸爸28 分钟前
2、中医基础入门和养生
前端·后端
牛马baby31 分钟前
Java高频面试之并发编程-07
java·开发语言·面试
局外人LZ32 分钟前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js
CodeWithMe38 分钟前
【C++】STL之deque
开发语言·c++