<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)] //���榊��絖�
				let deg = this.rn(-20, 20) //絖�篏�����莉��綺�
				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>
