uniapp中canvas實作環型進度條

文章目錄

• • 完整代碼
  • 相關知識點
  • • 1，如何畫圓

完整代碼

效果圖

<template>
	<view class='content'>
		<canvas style="width: 60px;height: 60px;" canvas-id="runCanvas" class='canvasII'></canvas>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 0
			}
		},
		mounted() {
			console.log("開始");
			//開始動畫
			this.start()
		},

		methods: {
			cartoon(num) {
				//建立一個畫布
				const ctx = uni.createCanvasContext('runCanvas')

				var yuanxin1 = 30 //圓心
				var yuanxin2 = 30
				var r = 20 //半徑

				ctx.beginPath()
				ctx.arc(yuanxin1, yuanxin2, r, 0, num * Math.PI)
				ctx.setStrokeStyle('#27c14b')
				ctx.setLineWidth(5)
				ctx.stroke()

				ctx.draw()

			},
			
			start(){
				//開始動畫
				var timer = setInterval(() => {
					this.num += 0.005
					this.cartoon(this.num)
					if (this.num > 2) {
						clearInterval(timer)
					}
				}, 10)
			}

		}
	}
</script>

<style>
</style>
           

相關知識點

1，如何畫圓

arc(x, y, r, startAngle, endAngle, anticlockwise)

:

• 以(x, y) 為圓心，以r 為半徑，
• 從

  startAngle

  弧度開始到

  endAngle

  弧度結束。

• anticlosewise

  是布爾值，true 表示逆時針，false 表示順時針(預設是順時針)

  

注意

小程式、app-nvue，因為通信阻塞，難以繪制非常流暢的canvas動畫。

h5和app-vue不存在此問題。但注意，app-vue下若想流暢的繪制canvas動畫，需要使用renderjs技術，把操作canvas的js邏輯放到視圖層運作，避免邏輯層和視圖層頻繁通信。