From 38eb4291c3207942f2891d09cc3918c8d97cd8ab Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Fri, 9 Aug 2024 15:44:18 +0800
Subject: [PATCH] =?UTF-8?q?ball:=20=E5=A2=9E=E5=8A=A0=20fps?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/component/canvas/canvas/ball.uvue | 33 ++++++++++++++++++++-----
 1 file changed, 27 insertions(+), 6 deletions(-)

diff --git a/pages/component/canvas/canvas/ball.uvue b/pages/component/canvas/canvas/ball.uvue
index 4c0aff27..cf5f1e28 100644
--- a/pages/component/canvas/canvas/ball.uvue
+++ b/pages/component/canvas/canvas/ball.uvue
@@ -1,10 +1,13 @@
 <template>
   <view class="page-body">
-    <canvas id="canvas" class="canvas"></canvas>
+    <canvas id="canvas" class="canvas"></canvas>
+    <text class="fps">FPS: {{fpsString}}</text>
   </view>
 </template>
 
-<script setup>
+<script setup>
+  let fpsString = ref("-/-ms")
+
   class Ball {
     private width : number
     private height : number
@@ -53,7 +56,9 @@
     private ballInlayer = 20
     private runningFlag : boolean = false
 
-    private _animateResult: number = 0
+    private _animateTaskId: number = 0
+    private frameCount = 0
+    private lastTime = 0
 
     constructor(ctx : CanvasRenderingContext2D) {
       this.ctx = ctx
@@ -96,20 +101,31 @@
       if (!this.runningFlag) {
         return
       }
-      this._animateResult = requestAnimationFrame((_: number) => {
+      this._animateTaskId = requestAnimationFrame((timestamp: number) => {
         this.animate()
+        this.updateFPS(timestamp)
       })
     }
+
+    updateFPS(timestamp : number) {
+      this.frameCount++
+      if (timestamp - this.lastTime >= 1000) {
+        const timeOfFrame = (1000 / this.frameCount)
+        fpsString.value = `${this.frameCount} / ${timeOfFrame.toFixed(3)}ms`
+        this.frameCount = 0
+        this.lastTime = timestamp
+      }
+    }
 
     start() {
-      cancelAnimationFrame(this._animateResult)
+      cancelAnimationFrame(this._animateTaskId)
       this.runningFlag = true
       this.animate()
     }
 
     stop() {
       this.runningFlag = false
-      cancelAnimationFrame(this._animateResult)
+      cancelAnimationFrame(this._animateTaskId)
     }
   }
 
@@ -154,5 +170,10 @@
     height: 300px;
     margin: auto;
     background-color: #fff;
+  }
+
+  .fps {
+    margin-left: 15px;
+    margin-top: 30px;
   }
 </style>
-- 
GitLab