110 lines
2.0 KiB
Vue
110 lines
2.0 KiB
Vue
|
<template>
|
|||
|
|
<view class="canvas-img-code"
|
|||
|
|
><canvas :style="{ width: width + 'px', height: height + 'px' }" canvas-id="imgcanvas" @tap="refresh"></canvas
|
|||
|
|
></view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
width: 120,
|
|||
|
|
height: 30,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.init()
|
|||
|
|
}, 300)
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
init() {
|
|||
|
|
let context = uni.createCanvasContext('imgcanvas', this),
|
|||
|
|
w = this.width,
|
|||
|
|
h = this.height
|
|||
|
|
context.setFillStyle('white')
|
|||
|
|
context.setLineWidth(5)
|
|||
|
|
context.fillRect(0, 0, w, h)
|
|||
|
|
let pool = [
|
|||
|
|
'A',
|
|||
|
|
'B',
|
|||
|
|
'C',
|
|||
|
|
'D',
|
|||
|
|
'E',
|
|||
|
|
'F',
|
|||
|
|
'G',
|
|||
|
|
'H',
|
|||
|
|
'J',
|
|||
|
|
'K',
|
|||
|
|
'L',
|
|||
|
|
'M',
|
|||
|
|
'N',
|
|||
|
|
'P',
|
|||
|
|
'Q',
|
|||
|
|
'R',
|
|||
|
|
'S',
|
|||
|
|
'T',
|
|||
|
|
'U',
|
|||
|
|
'V',
|
|||
|
|
'W',
|
|||
|
|
'S',
|
|||
|
|
'Y',
|
|||
|
|
'Z',
|
|||
|
|
'2',
|
|||
|
|
'3',
|
|||
|
|
'4',
|
|||
|
|
'5',
|
|||
|
|
'6',
|
|||
|
|
'7',
|
|||
|
|
'8',
|
|||
|
|
'9',
|
|||
|
|
],
|
|||
|
|
str = ''
|
|||
|
|
for (let i = 0; i < 4; i++) {
|
|||
|
|
let c = pool[this.rn(0, pool.length - 1)] //<2F><><EFBFBD>榊<EFBFBD><E6A68A>絖<EFBFBD>
|
|||
|
|
let deg = this.rn(-20, 20) //絖<>篏<EFBFBD><E7AF8F><EFBFBD><EFBFBD><EFBFBD>莉<EFBFBD><E88E89>綺<EFBFBD>
|
|||
|
|
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.toLowerCase(),
|
|||
|
|
})
|
|||
|
|
for (let 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()
|
|||
|
|
},
|
|||
|
|
rc(min, max) {
|
|||
|
|
let r = this.rn(min, max)
|
|||
|
|
let g = this.rn(min, max)
|
|||
|
|
let b = this.rn(min, max)
|
|||
|
|
return 'rgb(' + r + ',' + g + ',' + b + ')'
|
|||
|
|
},
|
|||
|
|
rn(max, min) {
|
|||
|
|
return parseInt(Math.random() * (max - min)) + min
|
|||
|
|
},
|
|||
|
|
refresh() {
|
|||
|
|
this.init()
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.canvas-img-code {
|
|||
|
|
// display: inline-block;
|
|||
|
|
}
|
|||
|
|
</style>
|