一体机、配置页

src/pages/canvas.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="canvas-wrap">
-    <canvas id="lineCanvas" width="300" height="300"></canvas>
-    <canvas id="carCanvas" width="300" height="300"></canvas>
+    <canvas id="carCanvas" width="645" height="686"></canvas>
   </div>
 </template>
 
@@ -10,77 +9,15 @@ import Easing from '@config/Easing.js'
 export default {
   data () {
     return {
-      keyPoints: [{x: 160, y: 200}, {x: 60, y: 200}, {x: 60, y: 400}, {x: 160, y: 400}]
+      keyPoints: [{x: 112, y: 183}, {x: 112, y: 425}, {x: 43, y: 427}, {x: 112, y: 425}]
     }
   },
   mounted () {
-    setTimeout(() => {
-      this.handleCanvasLine()
-    }, 5000)
     setTimeout(() => {
       this.handleCanvasCar()
-    }, 5900)
+    }, 3000)
   },
   methods: {
-    handleCanvasLine () {
-      const canvas = document.querySelector('#lineCanvas')
-      const ctx = canvas.getContext('2d')
-      let img = new Image()
-      img.src = require('../images/che.png')
-      // 设置线条样式
-      ctx.lineWidth = 1
-      ctx.lineJoin = 'round'
-      ctx.lineCap = 'round'
-      let prevX = this.keyPoints[0].x
-      let prevY = this.keyPoints[0].y
-      let nextX
-      let nextY
-      // 第一帧执行的时间
-      let startTime
-      // 期望动画持续的时间
-      const duration = 900
-      // 动画被切分成若干段,每一段所占总进度的比例
-      const partProportion = 1 / (this.keyPoints.length - 1)
-      // 缓存绘制第n段线段的n值,为了在进行下一段绘制前把这一段线段的末尾补齐
-      let lineIndexCache = 1
-      // 动画帧绘制方法currentTime是requestAnimation执行回调方法step时会传入的一个执行时的时间(由performance.now()获得).
-      const step = (currentTime) => {
-        // 第一帧绘制时记录下开始的时间
-        !startTime && (startTime = currentTime)
-        // 已经过去的时间(ms)
-        const timeElapsed = currentTime - startTime
-        // 动画执行的进度 {0,1}
-        let progress = Math.min(timeElapsed / duration, 1)
-        // 加入二次方缓动函数
-        progress = Easing.Quadratic.In(progress)
-        // 描述当前所绘制的是第几段线段
-        const lineIndex = Math.min(Math.floor(progress / partProportion) + 1, this.keyPoints.length - 1)
-        //  当前线段的进度 {0,1}
-        const partProgress = (progress - (lineIndex - 1) * partProportion) / partProportion
-        // 绘制方法
-        const draw = () => {
-          ctx.strokeStyle = `rgba(${81 + 175 * Math.abs(1 - progress * 2)}, ${160 - 160 * Math.abs(progress * 2 - 1)}, ${255},${1})`
-          ctx.beginPath()
-          ctx.moveTo(prevX, prevY)
-          // 当绘制下一段线段前,把上一段末尾缺失的部分补齐
-          if (lineIndex !== lineIndexCache) {
-            ctx.lineTo(this.keyPoints[lineIndex - 1].x, this.keyPoints[lineIndex - 1].y)
-            lineIndexCache = lineIndex
-          }
-          prevX = nextX = ~~(this.keyPoints[lineIndex - 1].x + ((this.keyPoints[lineIndex]).x - this.keyPoints[lineIndex - 1].x) * partProgress)
-          prevY = nextY = ~~(this.keyPoints[lineIndex - 1].y + ((this.keyPoints[lineIndex]).y - this.keyPoints[lineIndex - 1].y) * partProgress)
-          ctx.lineTo(nextX, nextY)
-          ctx.stroke()
-        }
-        draw()
-        if (progress < 1) {
-          requestAnimationFrame(step)
-        } else {
-          console.log('动画执行完毕')
-        }
-      }
-      requestAnimationFrame(step)
-    },
     handleCanvasCar () {
       const canvas = document.querySelector('#carCanvas')
       const ctx = canvas.getContext('2d')
@@ -91,7 +28,7 @@ export default {
       // 第一帧执行的时间
       let startTime
       // 期望动画持续的时间
-      const duration = 2000
+      const duration = 1000
       // 动画被切分成若干段,每一段所占总进度的比例
       const partProportion = 1 / (this.keyPoints.length - 1)
       // 缓存绘制第n段线段的n值,为了在进行下一段绘制前把这一段线段的末尾补齐
@@ -135,6 +72,7 @@ export default {
   position relative
   width 100%
   height 100%
+  background center / 100% auto url('~@/images/area_bg.png') no-repeat
 #lineCanvas
   position absolute
   left 0