<template>
  <canvas id="canvasView" style="width:100%;height:300px"></canvas>
</template>

<script>
export default {
  name: 'CanvasTestItem',
  data () {
    return {
      context: {},
      radius: 400
    }
  },
  mounted() {
    let canvas = document.querySelector('#canvasView')
    this.context = canvas.getContext('2d')
    // this.drawText()
    this.drawCircleText('测试文字，加油！！！', 270, 90)
  },
  methods: {
    drawText() {
      this.context.beginPath()
      this.context.font = '18px STheiti, SimHei'
      this.context.fillText('测试cesssssds', 130, 30)
      this.context.moveTo(80, 60)
      this.context.quadraticCurveTo(140, 30, 200, 60)
      this.context.stroke()
      // this.context.closePath()
    },
    drawCircleText(str, startAngle, endAngle) {
      let chartRadius = (startAngle - endAngle) / (str.length)
      // let index = 0
      console.log(chartRadius)
      // while(index < str.length){
        // this.context
      // }
    }
  }
}
</script>

<style scoped>

</style>
