<template>
    <div class="canvas_container" @click="rectClick">
    <!-- <div class="canvas_container"> -->
      <canvas id="myCanvas" width="946" height="982"></canvas>
    </div>
  </template>

<script>
// 屏幕分辨率为1920*1080
export default {
  data () {
    return {
      af: undefined,
      points: [{x1: 305, y1: 518, x2: 305, y2: 500}, {x1: 419, y1: 474, x2: 419, y2: 456}, {x1: 453, y1: 259, x2: 550, y2: 259}, {x1: 830, y1: 362, x2: 830, y2: 438}, {x1: 830, y1: 461, x2: 830, y2: 518}, {x1: 830, y1: 473, x2: 488, y2: 473}, {x1: 488, y1: 473, x2: 488, y2: 518}],
      dot4: {x1: 305, y1: 518, x2: 305, y2: 500},
      dot5: {x1: 419, y1: 474, x2: 419, y2: 456},
      dot6: {x1: 453, y1: 259, x2: 550, y2: 259},
      line2: 1,
      line3: 1,
      dot7: {x1: 830, y1: 362, x2: 830, y2: 438},
      dot8: {x1: 830, y1: 461, x2: 830, y2: 518},
      dot9: {x1: 830, y1: 473, x2: 488, y2: 516},
      dot10: {x1: 488, y1: 473, x2: 488, y2: 518},
      line4: 1
    }
  },
  mounted () {
    this.animate()
  },
  destroyed () {
    window.cancelAnimationFrame(this.af)
    this.af = undefined
  },
  methods: {
    rectClick () {
      var ev = window.event
      // 获取相对于当前所指向对象的位置坐标
      alert('x:' + ev.offsetX + 'y:' + ev.offsetY)
    },
    drawPoint (ctx, x, y) {
      ctx.beginPath()
      ctx.arc(x, y, 4, 0, 2 * Math.PI)
      ctx.fillStyle = 'yellow'
      ctx.fill()
      ctx.lineWidth = 1
      ctx.strokeStyle = 'yellow'
      ctx.closePath()
    },
    drawLine (ctx, x1, y1, x2, y2) {
      ctx.beginPath()
      ctx.moveTo(x1, y1)
      ctx.lineTo(x2, y2)
      ctx.strokeStyle = '#00c8da'
      ctx.lineWidth = 1
      ctx.stroke()
    },
    animate () {
      let canvas = document.getElementById('myCanvas')
      let ctx = canvas.getContext('2d')
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      if (this.line2 === 1) {
        this.dot4.y1 -= 1
        this.drawPoint(ctx, this.dot4.x1, this.dot4.y1)
        if (this.dot4.y1 === this.dot4.y2) {
          this.dot4.y1 = 518
          this.line2 = 2
        }
      }
      if (this.line2 === 2) {
        this.dot5.y1 -= 1
        this.drawPoint(ctx, this.dot5.x1, this.dot5.y1)
        if (this.dot5.y1 === this.dot5.y2) {
          this.dot5.y1 = 474
          this.line2 = 1
        }
      }
      if (this.line3 === 1) {
        this.dot6.x1 += 1
        this.drawPoint(ctx, this.dot6.x1, this.dot6.y1)
        if (this.dot6.x1 === this.dot6.x2) {
          this.dot6.x1 = 455
          this.line3 = 1
        }
      }
      if (this.line4 === 1) {
        this.dot7.y1 += 1
        this.drawPoint(ctx, this.dot7.x1, this.dot7.y1)
        if (this.dot7.y1 === this.dot7.y2) {
          this.dot7.y1 = 362
          this.line4 = 2
        }
      }
      if (this.line4 === 2) {
        this.dot8.y1 += 1
        this.drawPoint(ctx, this.dot8.x1, this.dot8.y1)
        if (this.dot8.y1 === this.dot8.y2) {
          this.dot8.y1 = 461
          this.line4 = 3
        }
      }
      if (this.line4 === 3) {
        this.dot9.x1 -= 1
        this.drawPoint(ctx, this.dot9.x1, this.dot9.y1)
        if (this.dot9.x1 === this.dot9.x2) {
          this.dot9.x1 = 830
          this.line4 = 4
        }
      }
      if (this.line4 === 4) {
        this.dot10.y1 += 1
        this.drawPoint(ctx, this.dot10.x1, this.dot10.y1)
        if (this.dot10.y1 === this.dot10.y2) {
          this.dot10.y1 = 516
          this.line4 = 1
        }
      }
      for (let i = 0; i < this.points.length; i++) {
        this.drawLine(ctx, this.points[i].x1, this.points[i].y1, this.points[i].x2, this.points[i].y2)
      }
      this.af = window.requestAnimationFrame(this.animate)
    }
  }
}
</script>
  <style lang="stylus" scoped>
  @import '~@css/mixin'
  .canvas_container
    position absolute
    top 0
    left 0
    _wh(946px, 982px)
    // background red
  </style>
