验证码

Signed-off-by: lijunqing <lijunqing@dashoo.cn>

src/dashoo.cn/frontend_web/src/components/VCode.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="s-canvas">
-    <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
+    <canvas id="s-canvas"
+            :width="contentWidth"
+            :height="contentHeight"></canvas>
   </div>
 </template>
 <script>
@@ -62,17 +64,17 @@ export default {
   },
   methods: {
     // 生成一个随机数
-    randomNum(min, max) {
+    randomNum (min, max) {
       return Math.floor(Math.random() * (max - min) + min)
     },
     // 生成一个随机的颜色
-    randomColor(min, max) {
+    randomColor (min, max) {
       var r = this.randomNum(min, max)
       var g = this.randomNum(min, max)
       var b = this.randomNum(min, max)
       return 'rgb(' + r + ',' + g + ',' + b + ')'
     },
-    drawPic() {
+    drawPic () {
       var canvas = document.getElementById('s-canvas')
       var ctx = canvas.getContext('2d')
       ctx.textBaseline = 'bottom'
@@ -89,13 +91,13 @@ export default {
       this.drawLine(ctx)
       this.drawDot(ctx)
     },
-    drawText(ctx, txt, i) {
+    drawText (ctx, txt, i) {
       ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
       ctx.font =
         this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'
       var x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
       var y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
-      var deg = this.randomNum(-45, 45)
+      var deg = this.randomNum(-10, 10)
       // 修改坐标原点和旋转角度
       ctx.translate(x, y)
       ctx.rotate(deg * Math.PI / 180)
@@ -104,9 +106,9 @@ export default {
       ctx.rotate(-deg * Math.PI / 180)
       ctx.translate(-x, -y)
     },
-    drawLine(ctx) {
+    drawLine (ctx) {
       // 绘制干扰线
-      for (let i = 0; i < 8; i++) {
+      for (let i = 0; i < 2; i++) {
         ctx.strokeStyle = this.randomColor(
           this.lineColorMin,
           this.lineColorMax
@@ -123,9 +125,9 @@ export default {
         ctx.stroke()
       }
     },
-    drawDot(ctx) {
+    drawDot (ctx) {
       // 绘制干扰点
-      for (let i = 0; i < 100; i++) {
+      for (let i = 0; i < 25; i++) {
         ctx.fillStyle = this.randomColor(0, 255)
         ctx.beginPath()
         ctx.arc(
@@ -140,11 +142,11 @@ export default {
     }
   },
   watch: {
-    identifyCode() {
+    identifyCode () {
       this.drawPic()
     }
   },
-  mounted() {
+  mounted () {
     this.drawPic()
   }
 }