canvas实现画图形验证码

mercurio13zeq

于 2022-09-15 14:13:20 发布

阅读量334

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_42491987/article/details/126869904

本文介绍了如何在Vue.js项目中利用HTML canvas元素结合JavaScript来创建动态的图形验证码。通过在`mounted`生命周期钩子中初始化canvas，绘制随机图形，并设置相应的CSS样式，实现了自定义验证码的生成与显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html:

<canvas id="canvas" @click="getCanvas()"></canvas>

mounted:

this.draw("9527")

js:

    getCanvas() {
        const numArr = ['mercurio13zeq', 'canvas', '9527', '11数字33', 'd字母f']
        const index = Math.floor(Math.random()*5)
        const num = numArr[index]
        this.draw(num)
    },
    draw(str) {
      let canvas_width = 120;
      let canvas_height = 50;
      let canvas = document.getElementById("canvas"); //获取到canvas的对象，演员
      // console.log(canvas)
      let context = canvas.getContext("2d"); //获取到canvas画图的环境，演员表演的舞台
      // console.log(context)
      canvas.width = canvas_width;
      canvas.height = canvas_height;
      context.fillStyle = "#cccccc";
      context.fillRect(0, 0, 300, 200);
      let sCode = str;
      // 	"A,B,C,D,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,U,V,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
      // let aCode = sCode.split(",");
      let aLength = sCode.length; //获取到数组的长度

      for (let i = 0; i < aLength; i++) {
        // let j = Math.floor(Math.random() * aLength); //获取到随机的索引值
        let deg = (Math.random() * 15 * Math.PI) / 180; //产生0~30之间的随机弧度
        let txt = sCode[i]; //得到随机的一个内容
        // num[i] = txt;

        let x = 10 + i * 30; //文字在canvas上的x坐标
        let y = 30 + Math.random() * 8; //文字在canvas上的y坐标
        context.font = "bold 23px 微软雅黑";
        context.translate(x, y);
        context.rotate(deg);
        context.fillStyle = this.randomColor();
        context.fillText(txt, 0, 0);
        context.rotate(-deg);
        context.translate(-x, -y);
      }
      for (let i = 0; i <= 5; 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 (let i = 0; i <= 30; i++) {
        //验证码上显示小点
        context.strokeStyle = this.randomColor();
        context.beginPath();
        let x = Math.random() * canvas_width;
        let y = Math.random() * canvas_height;
        context.moveTo(x, y);
        context.lineTo(x + 1, y + 1);
        context.stroke();
      }
      // this.number = this.num.join().replace(/,/g, "");
    },
    /**
     * @description:得到随机颜色
     */
    randomColor() {
      let r = Math.floor(Math.random() * 256);
      let g = Math.floor(Math.random() * 256);
      let b = Math.floor(Math.random() * 256);
      return "rgb(" + r + "," + g + "," + b + ")";
    },

css:

canvas {
  display: block;
   width: 120px;
  height: 50px;
}