canvas: 调整布局，将测试结果移动到底部

pages/component/canvas/canvas.uvue

 <template>
   <view class="page" id="page-canvas">
-
     <canvas id="canvas" class="canvas-element"></canvas>
     <scroll-view class="scroll-view">
+      <!-- #ifdef WEB -->
+      <button class="canvas-drawing-button" @click="canvasToBlob">canvasToBlob</button>
       <view>
-        <text style="padding: 8px 10px;">获取 CanvasContext</text>
+        <text>testToBlobResult: {{testToBlobResult}}</text>
+      </view>
+      <!-- #endif -->
+      <button class="canvas-drawing-button" id="toDataURL" @click="canvasToDataURL">canvasToDataURL</button>
+      <view class="text-group" v-if="dataBase64.length>0">
+        <text>canvasToDataURL:</text>
+        <text>{{dataBase64.slice(0,22)}}...</text>
       </view>
+      <button @click="onCreateImage">createImage</button>
+      <button @click="onCreatePath2D">createPath2D</button>
+      <button @click="startAnimationFrame">requestAnimationFrame</button>
+      <button @click="stopAnimationFrame">cancelAnimationFrame</button>
+      <view style="padding: 8px 10px;">CanvasContext API 演示</view>
+      <navigator url="./canvas-context">
+        <button>CanvasContext API</button>
+      </navigator>
+
       <view class="text-group">
         <text>获取 CanvasContext 结果：</text>
         <text id="testCanvasContext">{{testCanvasContext}}</text>
@@ -24,27 +40,6 @@
         <text>测试 createPath2D 结果：</text>
         <text id="testCreatePath2D">{{testCreatePath2D}}</text>
       </view>
-
-      <!-- #ifdef WEB -->
-      <button class="canvas-drawing-button" @click="canvasToBlob">canvasToBlob</button>
-      <view>
-        <text>testToBlobResult: {{testToBlobResult}}</text>
-      </view>
-      <!-- #endif -->
-      <button class="canvas-drawing-button" id="toDataURL" @click="canvasToDataURL">canvasToDataURL</button>
-      <view class="text-group" v-if="dataBase64.length>0">
-        <text>canvasToDataURL:</text>
-        <text>{{dataBase64.slice(0,22)}}...</text>
-      </view>
-      <button @click="onCreateImage">createImage</button>
-      <button @click="onCreatePath2D">createPath2D</button>
-      <button @click="startAnimationFrame">requestAnimationFrame</button>
-      <button @click="stopAnimationFrame">cancelAnimationFrame</button>
-      <view style="padding: 8px 10px;">CanvasContext API 演示</view>
-      <navigator url="./canvas-context">
-        <button>CanvasContext API</button>
-      </navigator>
-
     </scroll-view>
   </view>
 </template>
@@ -67,9 +62,9 @@
         renderingContext: null as CanvasRenderingContext2D | null,
         canvasWidth: 0,
         canvasHeight: 0,
-        dataBase64: '',
-        taskId: 0,
-        lastTime: 0,
+        dataBase64: '',
+        taskId: 0,
+        lastTime: 0,
         frameCount: 0,
         // 仅测试
         testCanvasContext: false,
@@ -94,7 +89,7 @@
 
           hidpi(this.canvas!);
           this.canvasWidth = this.canvas!.width;
-          this.canvasHeight = this.canvas!.height;
+          this.canvasHeight = this.canvas!.height;
 
           // #ifdef WEB
           context.toBlob((blob : Blob) => {
@@ -113,11 +108,11 @@
       // this.canvas = canvas;
       // this.canvasWidth = canvas.width;
       // this.canvasHeight = canvas.height;
-    },
-    onUnload() {
-      if (this.taskId > 0) {
-        this.stopAnimationFrame()
-      }
+    },
+    onUnload() {
+      if (this.taskId > 0) {
+        this.stopAnimationFrame()
+      }
     },
     methods: {
       // #ifdef WEB
@@ -130,7 +125,7 @@
       canvasToDataURL() {
         this.dataBase64 = this.canvasContext!.toDataURL()
       },
-      onCreateImage() {
+      onCreateImage() {
         this.renderingContext!.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
         let image = this.canvasContext!.createImage();
         image.src = "../../static/logo.png"
@@ -159,27 +154,27 @@
           path2D.bezierCurveTo(x2, y2, x3, y3, x4, y4);
         }
         context.stroke(path2D);
-      },
-      startAnimationFrame() {
-        this.taskId = this.canvasContext!.requestAnimationFrame((timestamp : number) => {
-          this.testFrameCount++
-          this.updateFPS(timestamp)
-          this.startAnimationFrame()
-        })
-      },
-      stopAnimationFrame() {
-        this.canvasContext!.cancelAnimationFrame(this.taskId)
-        this.taskId = 0
-      },
-      updateFPS(timestamp : number) {
-        this.frameCount++
-        if (timestamp - this.lastTime >= 1000) {
-          const timeOfFrame = (1000 / this.frameCount)
-          this.renderingContext!.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
-          this.renderingContext!.fillText(`${this.frameCount} / ${timeOfFrame.toFixed(3)}ms`, 10, 18)
-          this.frameCount = 0
-          this.lastTime = timestamp
-        }
+      },
+      startAnimationFrame() {
+        this.taskId = this.canvasContext!.requestAnimationFrame((timestamp : number) => {
+          this.testFrameCount++
+          this.updateFPS(timestamp)
+          this.startAnimationFrame()
+        })
+      },
+      stopAnimationFrame() {
+        this.canvasContext!.cancelAnimationFrame(this.taskId)
+        this.taskId = 0
+      },
+      updateFPS(timestamp : number) {
+        this.frameCount++
+        if (timestamp - this.lastTime >= 1000) {
+          const timeOfFrame = (1000 / this.frameCount)
+          this.renderingContext!.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
+          this.renderingContext!.fillText(`${this.frameCount} / ${timeOfFrame.toFixed(3)}ms`, 10, 18)
+          this.frameCount = 0
+          this.lastTime = timestamp
+        }
       }
     }
   }