ProAdvanced/components/prompt-box/prompt-box.vue

<template>
	<view>
		<canvas style="width: 375px; height: 270px;" canvas-id="promptCanvas"></canvas>
	</view>
</template>

<script>
	import utilData from "../../util/util-js/util-data.js"
	export default {
		props: {
			calorie: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				tipCanvasInterval: null,
				context: null,
				bShow: false,
				promptInterval:null,
			}
		},
		watch: {
			calorie(val) {
				// this.onPlay();
			}
		},
		created() {
			var context = uni.createCanvasContext('promptCanvas')
			this.context = context;
			
			setTimeout(()=>{
				//循环一个提示
				this.promptInterval = setInterval(() => {
					if (this.bShow) {
						this.hideDraw();
					} else {
						this.Draw();
					}
					this.bShow = !this.bShow;
				}, 60000)
			},500)

		},
		beforeDestroy() {
			clearInterval(this.promptInterval);
			this.promptInterval = null;
		},
		methods: {
			hideDraw() {
				// console.log("hide draw");
				clearInterval(this.tipCanvasInterval);
				this.tipCanvasInterval = null;
				this.context.beginPath();
				this.context.clearRect(0, 0, 1000, 1000);
				this.context.draw();
			},
			Draw() {
				// console.log("Draw");
				var context = this.context;
				let pos = {
					x: 200,
					y: 90
				};
				let tempCount = 0;
				let index = 0;
				this.tipCanvasInterval = setInterval(() => {

					if (30 <= tempCount) {
						if (index == 0) {
							index++;
							tempCount = 0;
						} else if (index == 1) {
							//最后绘制背景板和文字
							index++;
							tempCount = 0;
						} else {
							clearInterval(this.tipCanvasInterval);
							this.tipCanvasInterval = null;
						}
						return;
					}
					tempCount++;
					context.setStrokeStyle("#FFFFFF")
					context.setLineWidth(0.33)
					//线段最后一个点位置
					let endPos = {
						x: pos.x,
						y: pos.y
					};
					//起始点
					context.beginPath();
					context.setStrokeStyle("rgba(255,255,255,0)")
					context.setLineWidth(0.33)
					context.moveTo(endPos.x + 5, endPos.y)
					context.arc(endPos.x, endPos.y, 5, 0, 2 * Math.PI, true)
					context.fillStyle = "rgba(255,255,255,0.3)"
					context.fill()
					context.stroke()

					context.beginPath();
					context.setStrokeStyle("#FFFFFF")
					context.moveTo(endPos.x + 2, endPos.y)
					context.arc(endPos.x, endPos.y, 2, 0, 2 * Math.PI, true)
					context.fillStyle = "#FFFFFF"
					context.fill()
					context.stroke()

					if (index == 0) {
						endPos.x = pos.x + tempCount;
						endPos.y = pos.y - tempCount * 2;
						context.beginPath();
						context.moveTo(pos.x, pos.y)
						context.lineTo(endPos.x, pos.y - tempCount * 2)
						context.stroke()
					} else if (index == 1) {
						let x = pos.x + 30;
						let y = pos.y - 60;
						endPos.x = x + tempCount;
						endPos.y = y;
						context.beginPath();
						context.moveTo(pos.x, pos.y)
						context.lineTo(x, y)
						context.stroke()
						context.beginPath();
						context.moveTo(x, y)
						context.lineTo(x + tempCount, y)
						context.stroke()
					} else if (index == 2) {

						let x = pos.x + 30;
						let y = pos.y - 60;
						//白点的位置
						endPos.x = x + 30;
						endPos.y = y;

						context.beginPath();
						context.moveTo(pos.x, pos.y)
						context.lineTo(x, y)
						context.stroke()
						context.beginPath();
						context.moveTo(x, y)
						context.lineTo(x + 30, y)
						context.stroke()
						//偏移量调整
						let yPos = 0;
						let xPos = 15;
						context.setStrokeStyle("#FFFFFF")
						context.setLineWidth(1)
						context.beginPath();
						context.moveTo(endPos.x + xPos, endPos.y - 10 + yPos)
						context.lineTo(endPos.x + 7 + xPos, endPos.y - 20 + yPos)
						context.lineTo(endPos.x + 85 + xPos, endPos.y - 20 + yPos)
						context.lineTo(endPos.x + 85 + xPos, endPos.y + yPos)
						context.lineTo(endPos.x + 73 + xPos, endPos.y + 10 + yPos)
						context.lineTo(endPos.x + xPos, endPos.y + 10 + yPos)
						context.lineTo(endPos.x + xPos, endPos.y - 10 + yPos)
						// context.fillStyle = "#FFFFFF"
						// context.fill()
						context.stroke()

						context.fillStyle = "#FFFFFF"
						context.font = "12px Arial";
						let kg = utilData.calorieConversionKg(this.calorie);
						context.fillText("约 "+kg.toFixed(2)+" 公斤", endPos.x + 10 + xPos, endPos.y + yPos);

					}

					//绘制点移动

					context.beginPath();
					context.setStrokeStyle("rgba(255,255,255,0)")
					context.setLineWidth(0.33)
					context.moveTo(endPos.x + 5, endPos.y)
					context.arc(endPos.x, endPos.y, 5, 0, 2 * Math.PI, true)
					context.fillStyle = "rgba(255,255,255,0.3)"
					context.fill()
					context.stroke()

					context.beginPath();
					context.setStrokeStyle("#FFFFFF")
					context.moveTo(endPos.x + 2, endPos.y)
					context.arc(endPos.x, endPos.y, 2, 0, 2 * Math.PI, true)
					context.fillStyle = "#FFFFFF"
					context.fill()
					context.stroke()

					context.draw()
				}, 10)
			}
		}
	}
</script>

<style>

</style>