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>
|