<template>

  <div class="s-canvas">

    <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>

  </div>

</template>

<script>

  export default{

    name: 'SIdentify',

    props: {

      identifyCode: {

        type: String,

        default: '1234'

      },

      fontSizeMin: {

        type: Number,

        default: 16

      },

      fontSizeMax: {

        type: Number,

        default: 40

      },

      backgroundColorMin: {

        type: Number,

        default: 180

      },

      backgroundColorMax: {

        type: Number,

        default: 240

      },

      colorMin: {

        type: Number,

        default: 50

      },

      colorMax: {

        type: Number,

        default: 160

      },

      lineColorMin: {

        type: Number,

        default: 40

      },

      lineColorMax: {

        type: Number,

        default: 180

      },

      dotColorMin: {

        type: Number,

        default: 0

      },

      dotColorMax: {

        type: Number,

        default: 255

      },

      contentWidth: {

        type: Number,

        default: 112

      },

      contentHeight: {

        type: Number,

        default: 38

      }

    },

    methods: {

      // 生成一个随机数

      randomNum (min, max) {

        return Math.floor(Math.random() * (max - min) + min)

      },

      // 生成一个随机的颜色

      randomColor (min, max) {

        let r = this.randomNum(min, max)

        let g = this.randomNum(min, max)

        let b = this.randomNum(min, max)

        return 'rgb(' + r + ',' + g + ',' + b + ')'

      },

      drawPic () {

        let canvas = document.getElementById('s-canvas')

        let ctx = canvas.getContext('2d')

        ctx.textBaseline = 'bottom'

        // 绘制背景

        ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)

        ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)

        // 绘制文字

        for (let i = 0; i < this.identifyCode.length; i++) {

          this.drawText(ctx, this.identifyCode[i], i)

        }

        this.drawLine(ctx)

        this.drawDot(ctx)

      },

      drawText (ctx, txt, i) {

        ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)

        ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'

        let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))

        let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)

        var deg = this.randomNum(-45, 45)

        // 修改坐标原点和旋转角度

        ctx.translate(x, y)

        ctx.rotate(deg * Math.PI / 180)

        ctx.fillText(txt, 0, 0)

        // 恢复坐标原点和旋转角度

        ctx.rotate(-deg * Math.PI / 180)

        ctx.translate(-x, -y)

      },

      drawLine (ctx) {

        // 绘制干扰线

        for (let i = 0; i < 8; i++) {

          ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax)

          ctx.beginPath()

          ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))

          ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))

          ctx.stroke()

        }

      },

      drawDot (ctx) {

        // 绘制干扰点

        for (let i = 0; i < 100; i++) {

          ctx.fillStyle = this.randomColor(0, 255)

          ctx.beginPath()

          ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI)

          ctx.fill()

        }

      }

    },

    watch: {

      identifyCode () {

        this.drawPic()

      }

    },

    mounted () {

      this.drawPic()

    }

  }

</script>

<template>

    <div class="code" @click="refreshCode">

    <s-identify :identifyCode="identifyCode"></s-identify>

  </div>

</template>

<script>
import SIdentify    from '@/components/public/identify/identify'

export default {

  name: "codetest",

　　components: {
　　　　Footer,
　　　　SIdentify
　　},

  data() {

    return {

      identifyCodes: "1234567890",

      identifyCode: ""

    };

  },

  mounted() {

    this.identifyCode = "";

    this.makeCode(this.identifyCodes, 4);

  },

  methods: {

    randomNum(min, max) {

      return Math.floor(Math.random() * (max - min) + min);

    },

    refreshCode() {

      this.identifyCode = "";

      this.makeCode(this.identifyCodes, 4);

    },

    makeCode(o, l) {

      for (let i = 0; i < l; i++) {

        this.identifyCode += this.identifyCodes[

          this.randomNum(0, this.identifyCodes.length)

        ];

      }

      console.log(this.identifyCode);

    }

  }

};

</script>

<style>

.code {

  margin: 400px auto;

  width: 114px;

  height: 40px;

  border: 1px solid red;

}

</style>