vue 圖形驗證碼

<template>
  <div>
    <canvas class="mycanvas" width="80" height="40">抱歉，您的瀏覽器不支持canvas元素，換個瀏覽器試試？</canvas>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
      code: "1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
    };
  },
  mounted() {
    this.fourCode();
  },
  methods: {
    randomColor() {
      //得到隨機的顏色值
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      return "rgb(" + r + "," + g + "," + b + ")";
    },
    fourCode() {
      this.value="";
      for (let a = 0; a < 4; a++) {
        this.value += this.code1();
      }
      this.doDraw();
    },
    code1() {
      let index = Math.floor(Math.random() * (this.code.length - 1) + 1);
      return this.code[index];
    },
    doDraw() {
      var x = 20;
      var y = 20 + Math.random() * 8;
      var deg = (Math.random() * 30 * Math.PI) / 180;
      //  獲取canvas
      var canvas = document.getElementsByClassName("mycanvas");
      canvas[0].width=canvas[0].width;//清空畫布
      canvas[0].height=canvas[0].height;
      var canvas_width = canvas[0].width;
      var canvas_height = canvas[0].height;
      var context = canvas[0].getContext("2d");
      context.font = "bold 23px 微軟雅黑";
      context.fillText(this.value, 15, 30);
      context.translate(x, y); //canvas原點的偏移量
      context.rotate(deg); //旋轉度數
      context.fillStyle = this.randomColor(); //設置顏色
      context.strokeStyle = this.randomColor(); //設置顏色
      context.rotate(-deg);
      context.translate(-x, -y);
      for (var i = 0; i <= 15; i++) {
        //驗證碼上顯示線條
        context.strokeStyle = this.randomColor(); //輪廓風格
        context.beginPath();
        context.moveTo(
          Math.random() * canvas_width,
          Math.random() * canvas_height
        );
        context.lineTo(
          Math.random() * canvas_width,
          Math.random() * canvas_height
        );
        context.stroke();
      }
      for (var i = 0; i <= 30; i++) {
        //驗證碼上顯示小點
        context.strokeStyle = this.randomColor();
        context.beginPath(); //新建一條路徑
        var x = Math.random() * canvas_width;
        var y = Math.random() * canvas_height;
        context.moveTo(x, y); //吧畫筆移動到指定位置
        context.lineTo(x + 1, y + 1); //想指定位置移動
        context.stroke();
      }
    }
  }
};
</script>
<style>
.mycanvas {
  border: 1px solid rgb(199, 198, 198);
  border-radius: 20%;
}
</style>

 

<template>

   <div>

     <canvas  class= "mycanvas"  width= "80"  height= "40" >抱歉，您的瀏覽器不支持canvas元素，換個瀏覽器試試？ </canvas>

   </div>

</template>

<script>

export  default {

  data() {

     return {

      value:  "",

      code:  "1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"

    };

  },

  mounted() {

     this.fourCode();

  },

  methods: {

    randomColor() {

       //得到隨機的顏色值

       var r = Math.floor(Math.random() *  256);

       var g = Math.floor(Math.random() *  256);

       var b = Math.floor(Math.random() *  256);

       return  "rgb(" + r +  "," + g +  "," + b +  ")";

    },

    fourCode() {

       this.value= "";

       for ( let a =  0; a <  4; a++) {

         this.value +=  this.code1();

      }

       this.doDraw();

    },

    code1() {

       let index = Math.floor(Math.random() * ( this.code.length -  1) +  1);

       return  this.code[index];

    },

    doDraw() {

       var x =  20;

       var y =  20 + Math.random() *  8;

       var deg = (Math.random() *  30 * Math.PI) /  180;

       //  獲取canvas

       var canvas = document.getElementsByClassName( "mycanvas");

      canvas[ 0].width=canvas[ 0].width; //清空畫布

      canvas[ 0].height=canvas[ 0].height;

       var canvas_width = canvas[ 0].width;

       var canvas_height = canvas[ 0].height;

       var context = canvas[ 0].getContext( "2d");

      context.font =  "bold 23px 微軟雅黑";

      context.fillText( this.value,  15,  30);

      context.translate(x, y);  //canvas原點的偏移量

      context.rotate(deg);  //旋轉度數

      context.fillStyle =  this.randomColor();  //設置顏色

      context.strokeStyle =  this.randomColor();  //設置顏色

      context.rotate(-deg);

      context.translate(-x, -y);

       for ( var i =  0; i <=  15; i++) {

         //驗證碼上顯示線條

        context.strokeStyle =  this.randomColor();  //輪廓風格

        context.beginPath();

        context.moveTo(

          Math.random() * canvas_width,

          Math.random() * canvas_height

        );

        context.lineTo(

          Math.random() * canvas_width,

          Math.random() * canvas_height

        );

        context.stroke();

      }

       for ( var i =  0; i <=  30; i++) {

         //驗證碼上顯示小點

        context.strokeStyle =  this.randomColor();

        context.beginPath();  //新建一條路徑

         var x = Math.random() * canvas_width;

         var y = Math.random() * canvas_height;

        context.moveTo(x, y);  //吧畫筆移動到指定位置

        context.lineTo(x +  1, y +  1);  //想指定位置移動

        context.stroke();

      }

    }

  }

};

</script>

<style>

.mycanvas {

   border:  1px  solid rgb( 199,  198,  198);

   border-radius:  20%;

}

</style>