uniapp使用画布生成验证码

html:

<canvas
   style="width: 200rpx;height: 60rpx;"
   @click="refreshCaptcha"
   id="canvas"
   canvas-id="canvas" >
</canvas>

js: 画布初始化显示延迟一下。

// 引入封装的验证码文件
import {createCode, drawCanvas} from '@/util/verifyCode.js';

 onShow(){
// 画布上下文
    setTimeout(()=>{
      this.init();
    }, 100)
  },
    methods: {
	    init(){
	      this.ctx = uni.createCanvasContext('canvas', this);
	      this.code = createCode()
	      // canvas生成验证码
	      drawCanvas(this.ctx, this.code, 134, 55);
	    },
	      refreshCaptcha(){
		      this.init();
		    },
    }

下面是封装的 js文件

/** 获取四位随机码
 * @return  string
 */
export function createCode(){
    var str = '1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM'
    let codeText = ''
    for(let i = 1; i <= 4; i++