直接上组件,引入就能用
<template>
<view class="canvas-img-code" @click="refresh()">
<canvas :style="{width:width+'px',height:height+'px'}" canvas-id="imgcanvas" @error="canvasIdErrorCallback"></canvas>
</view>
</template>
<script>
// if (this.verCode.toLowerCase() != uni.getStorageSync('imgcode').toLowerCase()) {
// uni.showToast({
// icon: 'none',
// position: 'bottom',
// title: '验证码不正确'
// });
// return false;
// }验证方式 通过缓存uni.getStorageSync('imgcode')
export default {
data(){
return{
}
},
props:{
width:{
default:120
},
height:{
default:45
}
},
mounted() {
this.init()
},
methods:{
init: function() {
console.log('start');
var context = uni.createCanvasContext('imgcanvas', this),
w = this.width,
h = this.height;
context.setFillStyle("white");
context.setLineWidth(5);
context.fillRect(0, 0, w, h);
var pool = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "I", "M", "N", "O", "P", "Q", "R", "S",
"T", "U", "V", "W", "S", "Y", "Z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"
],
str = '';
for (var i = 0; i < 4; i++) {
var c = pool[this.rn(0, pool.length - 1)];
var deg = this.rn(-30, 30);
context.setFontSize(18);
context.setTextBaseline("top");
context.setFillStyle(this.rc(80, 150));
context.save();
context.translate(30 * i + 15, parseInt(h / 1.5));
context.rotate(deg * Math.PI / 180);
context.fillText(c, -15 + 5, -15);
context.restore();
str += c;
}
uni.setStorage({
key: 'imgcode',
data: str,
});
for (var i = 0; i < 40; i++) {
context.beginPath();
context.arc(this.rn(0, w), this.rn(0, h), 1, 0, 2 * Math.PI);
context.closePath();
context.setFillStyle(this.rc(150, 200));
context.fill();
}
context.draw();
console.log('end');
},
rc: function(min, max) {
var r = this.rn(min, max);
var g = this.rn(min, max);
var b = this.rn(min, max);
return "rgb(" + r + "," + g + "," + b + ")";
},
rn: function(max, min) {
return parseInt(Math.random() * (max - min)) + min;
},
refresh: function() {
this.init();
},
canvasIdErrorCallback: function(e) {
console.error(e.detail.errMsg)
}
}
}
</script>
<style>
</style>