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>

效果如下:

相关推荐
你怎么知道我是队长18 分钟前
C语言---循环结构
c语言·开发语言·算法
从零开始学习人工智能21 分钟前
快速搭建B/S架构HTML演示页:从工具选择到实战落地
前端·架构·html
o0o_-_1 小时前
【go/gopls/mcp】官方gopls内置mcp server使用
开发语言·后端·golang
虫虫rankourin1 小时前
在 create-react-app (CRA) 创建的应用中使用 react-router-dom v7以及懒加载的使用方法
前端·react.js
小刘鸭地下城1 小时前
Web安全必备:关键 HTTP 标头解析
前端
yddddddy1 小时前
html基本知识
前端·html
Dxy12393102161 小时前
python把文件从一个文件复制到另一个文件夹
开发语言·python
不要再敲了1 小时前
JavaScript与jQuery:从入门到面试的完整指南
javascript·面试·jquery
酷飞飞2 小时前
Qt Designer与事件处理
开发语言·qt·命令模式
荣达2 小时前
koa洋葱模型理解
前端·后端·node.js