guaguale_uniapp/pages/scratchCard/scratchCard - 原本卡顿.vue

<template>
	<view>
		<view class="prizePage">
			<view class="">
				
			</view>
			<view class="" style="position: relative;padding-top: 380px;width: 330px;margin: 0px auto;">
				<div id="gift" class="gift"></div>
				<canvas canvas-id="guagua" id="guagua" @touchstart="start" @touchend="end" @touchmove="move"
					style="width: 330px;height: 280px;"></canvas>
			</view>
			<view class="mask" v-if="isWin || isThank">
				
			</view>
			<view class="winPrize" v-if="isWin">
				20元
				<view class="close" @click="isWin = false"></view>
			</view>
			<view class="noPrize" v-if="isThank">
				
			</view>
		</view>
	</view>
</template>

<script>
	var ctx;
	var sx = 0,
			sy = 0,
			perNum = 0;
	var giftWidth=0,giftHeight=0; 
	var canvasId = "guagua";
	export default {
		data() {
			return {
				w: 330,
				h: 280,
				isfinish:false,
				isClear:false,
				isWin: false,
				isThank: false
			}
		},
		methods: {
			giftWidth:function(){
					const query = uni.createSelectorQuery().in(this);
					query.select('#gift').boundingClientRect(data => {
							giftWidth=data.width;
							giftHeight=data.height;
					}).exec();
			},
			finish:function(){
					this.isfinish=true;
			},
			done:function(){
					
					if(1){
						this.isWin = true;
					}else{
						this.isThank = true;
					}
					
			},
			start: function(e) {
					if(this.isfinish){
							if(!this.isClear){
									this.isClear=true;
									this.done();
									ctx.moveTo(0, 0);
									ctx.clearRect(0,0, 330, 280);
									ctx.stroke()
									ctx.draw(true);
							}
							 
							return false;
					} 
					sx = e.touches[0].x;
					sy = e.touches[0].y;
					ctx.moveTo(sx, sy);
					console.log(e.touches[0].x + "  " + e.touches[0].y)
					// this.getFilledPercentage();
					 
			},
			end: function(e) {
					if(this.isfinish) return false;

			},
			move: function(e) {
				e = e || window.event;
				e.preventDefault();
				
					if(this.isfinish){
							if(!this.isClear){
									this.isClear=true;
									this.done();
									ctx.moveTo(0, 0);
									ctx.clearRect(0,0, 330, 280);
									ctx.stroke()
									ctx.draw(true);
							}
							 
							return false;
					} 
					
					ctx.lineTo(sx, sy);
					ctx.moveTo(sx, sy);
					// ctx.clearRect(sx-10, sy-10, 20, 20)
					ctx.stroke()
					// ctx.globalAlpha = 0;
					
					ctx.draw(true);
					this.getFilledPercentage();
					 
					sx = e.touches[0].x;
					sy = e.touches[0].y;
			},
			createCtx: function() {
					ctx = uni.createCanvasContext(canvasId);
					this.createRect();

			},
			createRect: function() {
					ctx.setFillStyle('#646464');
					
					ctx.fillStyle = '#999';//刮刮乐图层的填充色
					ctx.lineCap = "round";//绘制的线结束时为圆形
					ctx.lineJoin = "round";//当两条线交汇时创建圆形边角
					ctx.lineWidth = 40;//单次刮开面积
					
					ctx.fillRect(0, 0, 330, 280);
					// ctx.closePath();
					ctx.globalCompositeOperation = 'destination-out';
					ctx.draw(true)
			},
			getFilledPercentage: function() {
					var that=this;
					uni.canvasGetImageData({
							canvasId: canvasId,
							x: (that.w-giftWidth)/2-5,
							y: (that.h-giftHeight)/2-5,
							width: giftWidth,
							height: giftHeight,
							success: function(res) {
									let pixels = res.data;
									let transPixels = [];
									for (let i = 0; i < pixels.length; i += 4) {
											if (pixels[i + 3] < 128) {
													transPixels.push(pixels[i + 3]);
											}
									}
									perNum = (transPixels.length / (pixels.length / 4) * 100).toFixed(2);
									if(perNum>=40){                     
											console.log("finish");
											that.finish();;
									}
									console.log(perNum)
							}
					});

			}
		},
		onReady(e) {
			this.createCtx();
			this.giftWidth();
		},
	}
</script>

<style lang="scss" scoped>
.prizePage{
	width: 750rpx;
	height: 1506rpx;
	background: url("../../static/home/prize-bg.png") no-repeat;
	background-size: contain;
}
.gift {
		width: 330px;
		height: 280px;
		background-color: #FFF1B9;
		position: absolute;
		left: 50%;
		// top: 50%;
		margin-left: -165px;
		// margin-top: 174px;
}
.mask{
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.2);
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 2;
}
.winPrize{
	width: 375px;
	height: 575px;
	background-image: url("../../static/home/prize.png");
	background-size: contain;
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 3;
	transform: translate(-50%, -50%);
	text-align: center;
	line-height: 550px;
	color: #FFF1B9;
	font-weight: bold;
	font-size: 60px;
	animation: showPrize 1s ease-in-out;
	
	.close{
		width: 50px;
		height: 50px;
		background-image: url("../../static/home/close.png");
		background-size: contain;
		position: fixed;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 4;
	}
}
@keyframes showPrize {
	0%{
		transform: translate(-50%, -50%) scale(0.4);
	}
	100%{
		transform: translate(-50%, -50%) scale(1);
	}
}
</style>