<template>
	<view class="canvas-img-code">
		<canvas :style="{width:width+'px',height:height+'px'}" canvas-id="imgcanvas"  @error="canvasIdErrorCallback" @click="refresh"></canvas>
	</view>
</template>

<script>
export default {
	name: "picyan",
		//属性
		props: {
			picname: {
				type: String,//属性类型
				value: ""
			},
			
		},
	data(){
		return {
			width:120,height:35
		}
	},
	mounted:function(){
		var _self=this;
		_self.init();
	},
    methods: {
		refresh(){
			this.init()
		},
		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;
				this.$emit("picname",str)
			}
			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;
		},
		
        canvasIdErrorCallback: function (e) {
            console.error(e.detail.errMsg)
        }
    }
}
</script>

<style lang="scss">
	canvas{
		height:50rpx;
	}
	.canvas-img-code{display: inline-block}
</style>