一、组件代码
1 <template> 2 <div class="s-canvas"> 3 <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> 4 </div> 5 </template> 6 <script> 7 export default{ 8 name: 'SIdentify', 9 props: { 10 identifyCode: { 11 type: String, 12 default: '1234' 13 }, 14 fontSizeMin: { 15 type: Number, 16 default: 20 17 }, 18 fontSizeMax: { 19 type: Number, 20 default: 35 21 }, 22 backgroundColorMin: { 23 type: Number, 24 default: 180 25 }, 26 backgroundColorMax: { 27 type: Number, 28 default: 240 29 }, 30 colorMin: { 31 type: Number, 32 default: 50 33 }, 34 colorMax: { 35 type: Number, 36 default: 160 37 }, 38 lineColorMin: { 39 type: Number, 40 default: 40 41 }, 42 lineColorMax: { 43 type: Number, 44 default: 180 45 }, 46 dotColorMin: { 47 type: Number, 48 default: 0 49 }, 50 dotColorMax: { 51 type: Number, 52 default: 255 53 }, 54 contentWidth: { 55 type: Number, 56 default: 112 57 }, 58 contentHeight: { 59 type: Number, 60 default: 38 61 } 62 }, 63 methods: { 64 // 生成一个随机数 65 randomNum (min, max) { 66 return Math.floor(Math.random() * (max - min) + min) 67 }, 68 // 生成一个随机的颜色 69 randomColor (min, max) { 70 let r = this.randomNum(min, max) 71 let g = this.randomNum(min, max) 72 let b = this.randomNum(min, max) 73 return 'rgb(' + r + ',' + g + ',' + b + ')' 74 }, 75 drawPic () { 76 let canvas = document.getElementById('s-canvas') 77 let ctx = canvas.getContext('2d') 78 ctx.textBaseline = 'bottom' 79 // 绘制背景 80 ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax) 81 ctx.fillRect(0, 0, this.contentWidth, this.contentHeight) 82 // 绘制文字 83 for (let i = 0; i < this.identifyCode.length; i++) { 84 this.drawText(ctx, this.identifyCode[i], i) 85 } 86 this.drawLine(ctx) 87 this.drawDot(ctx) 88 }, 89 drawText (ctx, txt, i) { 90 ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax) 91 ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei' 92 let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1)) 93 let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5) 94 var deg = this.randomNum(-45, 45) 95 // 修改坐标原点和旋转角度 96 ctx.translate(x, y) 97 ctx.rotate(deg * Math.PI / 180) 98 ctx.fillText(txt, 0, 0) 99 // 恢复坐标原点和旋转角度 100 ctx.rotate(-deg * Math.PI / 180) 101 ctx.translate(-x, -y) 102 }, 103 drawLine (ctx) { 104 // 绘制干扰线 105 for (let i = 0; i < 3; i++) { 106 ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax) 107 ctx.beginPath() 108 ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight)) 109 ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight)) 110 ctx.stroke() 111 } 112 }, 113 drawDot (ctx) { 114 // 绘制干扰点 115 for (let i = 0; i < 30; i++) { 116 ctx.fillStyle = this.randomColor(0, 255) 117 ctx.beginPath() 118 ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI) 119 ctx.fill() 120 } 121 } 122 }, 123 watch: { 124 identifyCode () { 125 this.drawPic() 126 } 127 }, 128 mounted () { 129 this.drawPic() 130 } 131 } 132 </script>
二、使用
js 部分：
1 import SIdentify from "../../components/common/Identify/identify"; 2 export default { 3 components: { 4 SIdentify: SIdentify 5 }, 6 data() { 7 return { 8 identifyCodes: "1234567890", 9 identifyCode: "" 10 }; 11 }, 12 methods: { 13 14 randomNum(min, max) { 15 return Math.floor(Math.random() * (max - min) + min); 16 }, 17 refreshCode() { 18 this.identifyCode = ""; 19 this.makeCode(this.identifyCodes, 4); 20 }, 21 makeCode(o, l) { 22 for (let i = 0; i < l; i++) { 23 this.identifyCode += this.identifyCodes[ 24 this.randomNum(0, this.identifyCodes.length) 25 ]; 26 } 27 console.log(this.identifyCode); 28 } 29 }, 30 mounted() { 31 this.identifyCode = ""; 32 this.makeCode(this.identifyCodes, 4); 33 } 34 };
HTML 部分：
1 <div class="coderight" @click="refreshCode"> 2 <SIdentify :identifyCode="identifyCode"></SIdentify> 3 </div>
效果图：
