guaguale_uniapp/pages/scratchCard/scratchCard - jquery+h5.vue

<template>
	<view>
		<view class="prizePage">
			<!--游玩区域-->
			    <div class="box">
			        <p class="rule">活动规则</p>
			        <a href="../my.html" id="myWin">
			            <p class="my">我的奖品</p>
			        </a>
			        <div class="panel">
			            <canvas id="canvas" width="562" height="308" @touchstart="mousedown" @touchmove="mousemove" @touchend="mouseup"></canvas>
			            <div id="canvas-mask">
			                <a id="btn" href="javascript:;" @click="btnClick"></a>
			                <p>您今天还有<span id="change">3</span>次刮奖机会</p>
			            </div>
			        </div>
			        
			    </div>
			    <!--游戏规则弹窗-->
			    <div id="mask-rule">
			        <div class="box-rule">
			            <span class="star"></span>
			            <h2>活动规则说明</h2>
			            <span id="close-rule"></span>
			            <div class="con">
			                <div class="text">
			                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
			                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
			                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
			                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
			                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
			                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
			                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
			                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
			                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
			                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
			                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
			                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
			                </div>
			            </div>
			        </div>
			    </div>
			    <!--中奖提示-->
			    <div id="mask">
			        <div class="blin"></div>
			        <div class="caidai"></div>
			        <div class="winning">
			            <div class="red-head"></div>
			            <div class="red-body"></div>
			            <div id="card">
			                <a href="" target="_self" class="win"></a>
			            </div>
			            <a href="" target="_self" class="btn"></a>
			            <span id="close"></span>
			        </div>
			    </div>
		</view>
	</view>
</template>

<script>
var $canvas = $("#canvas"),//canvas
        clientWidth = document.documentElement.clientWidth,
        canvasWidth = Math.floor(clientWidth * 562 / 750),//canvas宽 = 屏幕宽 * 设计稿里canvas宽 / 750
        canvasHeight = Math.floor(clientWidth * 308 / 750),//canvas高 = 屏幕宽 * 设计稿里canvas高 / 750
        ctx = $canvas[0].getContext("2d"),//获取canvas的2d绘制对象
        $canvasMask = $("#canvas-mask"),//canvas遮罩层
        $btn = $("#btn"),//刮奖按钮
        $change = $("#change"),//剩余次数
        data = {count: 5},//次数
        empty = false,
        bool = false;//判断是否按下去，true为按下，false未按下
	export default {
		data() {
			return {
				// w: 330,
				// h: 280,
				// isfinish:false,
				// isClear:false,
				// isWin: false,
				// isThank: false
			}
		},
		methods: {
			init() {
					$canvasMask.show();
					$change.html(data.count);//显示剩余次数
					//设置canvas宽高
					$canvas.attr('width', canvasWidth);
					$canvas.attr('height', canvasHeight);
	
					//canvas绘图
					ctx.beginPath();
					ctx.fillStyle = '#999';//刮刮乐图层的填充色
					ctx.lineCap = "round";//绘制的线结束时为圆形
					ctx.lineJoin = "round";//当两条线交汇时创建圆形边角
					ctx.lineWidth = 20;//单次刮开面积
					ctx.fillRect(0, 0, canvasWidth, canvasHeight);
					ctx.closePath();
	
					ctx.globalCompositeOperation = 'destination-out';//新图像和原图像重合部分变透明
					//下面3行代码是为了修复部分手机浏览器不支持destination-out
					$canvas.css("display", "none");
					$canvas.outerHeight();
					$canvas.css("display", "inherit");
			},
			btnClick () {//点击开始刮奖按钮
					if (data.count > 0) {
							data.count--;//设定中奖的图片
							$canvas.css("background-image", "url('../common/image/prize/prize2.png')");
							$canvasMask.hide();
					} else {
							alert("没有次数了");
					}
			},
			//鼠标按下
			mousedown (e) {
					e = e || window.event;
					e.preventDefault();
					if (typeof e.touches !== 'undefined') {
							e = e.touches[0];//获取触点
					}
					var x = e.pageX - $(this).offset().left,
							y = e.pageY - $(this).offset().top;
					ctx.moveTo(x, y);
					//touchmove事件
					$canvas.on('touchmove', eventMove);
			},
			mousemove (e) {
					e = e || window.event;
					e.preventDefault();
					if (typeof e.touches !== 'undefined') {
							e = e.touches[0];
					}
					var x = e.pageX - $(this).offset().left,
							y = e.pageY - $(this).offset().top;
					ctx.lineTo(x, y);
					ctx.stroke();
					clear();
			},
			//鼠标按键抬起
			mouseup () {
					
			},
			clear() {
					if (empty) return;
					var data = ctx.getImageData(0, 0, canvasWidth, canvasHeight).data,//得到canvas的全部数据
							half = 0;
	
					//length = canvasWidth * canvasHeight * 4，一个像素块是一个对象rgba四个值，a范围为0~255
					for (var i = 3, length = data.length; i < length; i += 4) {//因为有rgba四个值，下标0开始，所以初始i=3
							data[i] === 0 && half++;//存在imageData对象时half加1  PS:该像素区域透明即为不存在该对象
					}
					//当刮开的区域大于等于20%时，则可以开始处理结果
					if (half >= canvasWidth * canvasHeight * 0.2) {
							ctx.clearRect(0, 0, canvasWidth, canvasHeight);//清空画布
							empty = true;
							win();//调用中奖信息
					}
			},
			
			
		},
		onReady(e) {
			this.init();
		},
	}
</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>