<!DOCTYPE html>
<html>
<head lang="en">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1" />
<meta charset="UTF-8">
<script src="js/jquery-1.9.1.js"></script>
<title></title>
<style>
body{
background-color: #ffdcaf;
}
.gua_bg {
width: 415px;
height: 200px;
padding-top: 12px;
padding-left: 12px;
background: url(img/gua_image.png) no-repeat;
background-size: 100% 100%;
color: red;
}
.gua_bg p {
position: absolute;
width: 384px;
line-height: 173px;
text-align: center;
font-size: 30px;
}
.gua_bg canvas {
cursor: hand;
position: absolute;
}
</style>
</head>
<body>
<div class="gua_bg">
<p></p>
<canvas/>
</div>
<div class="gua_cont">
<button class="continue" >继续刮奖</button>
</div>
<div class="gua_residue">你还有<b>0</b>次刮奖机会</div>
<script>
(function(bodyStyle) {
localStorage.num=localStorage.num || 3;
$(".gua_residue b").text(localStorage.num);
$(".continue").click(function(){
localStorage.num=localStorage.num-1;
history.go(0);
});
if(localStorage.num>0){
bodyStyle.mozUserSelect = 'none';
bodyStyle.webkitUserSelect = 'none';
var img = new Image();
var canvas = document.querySelector('canvas');
canvas.style.backgroundColor='transparent';
img.addEventListener('load', function(e) {
var ctx;
var w = 403, h = 190;
var offsetX = canvas.offsetLeft,
offsetY = canvas.offsetTop;
var mousedown = false;
function layer(ctx) {
ctx.fillStyle = 'gray'; //画布填充灰色
ctx.fillRect(0, 0, w, h); //绘制“被填充”的矩形 ，坐标（0,0），w,h为宽高
}
function eventDown(e){
e.preventDefault(); //阻止元素发生默认的行为
mousedown=true; //当用户在这个元素上按下鼠标键的时候
}
function eventUp(e){
e.preventDefault();
mousedown=false;
}
function eventMove(e){
e.preventDefault();
if(mousedown) {
if(e.changedTouches){ //涉及当前(引发)事件的触摸点的列表
e=e.changedTouches[e.changedTouches.length-1];
}
var x = (e.clientX ) - offsetX || 0, //clientX返回当事件被触发时鼠标指针向对于浏览器页面的水平坐标。
y = (e.clientY) - [$(canvas).offset().top-$(document).scrollTop()]; //document.body.scrollLeft获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
//offsetX发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标
with(ctx) {
beginPath(); //起始一条路径，或重置当前路径
arc(x, y, 11, 0, Math.PI * 2); // arc()用于创建圆或部分圆; x，y:圆心距边框的距离 11:半径 Math.PI * 2：圆
fillStyle="red";
fill(); //填充当前绘图（路径）
var prize="";
switch (parseInt(localStorage.num)){
case 3 : prize="京东卡"; break;
case 2 : prize="优惠券"; break;
case 1 : prize="现金红包"; break;
default : break;
}
$(".gua_bg p").text(prize);
}
}
}
canvas.width=w;
canvas.height=h;
// canvas.style.backgroundImage='url('+img.src+')';
ctx=canvas.getContext('2d'); //返回一个用于在画布上绘图的2d环境
//创建透明目标图（您已经放置在画布上的绘图）
ctx.fillStyle='transparent';
ctx.fillRect(0, 0, w, h); //绘制“被填充”的矩形 ，坐标（0,0），w,h为宽高
//创建灰色源图（您打算放置到画布上的绘图）
layer(ctx);
ctx.globalCompositeOperation = 'destination-out'; //让灰色图透明，（只有源图像外的目标图像部分会被显示，源图像是透明的）。
canvas.addEventListener('touchstart', eventDown);
canvas.addEventListener('touchend', eventUp);
canvas.addEventListener('touchmove', eventMove);
canvas.addEventListener('mousedown', eventDown);
canvas.addEventListener('mouseup', eventUp);
canvas.addEventListener('mousemove', eventMove);
});
img.src = 'img/gua_img.png';
}
})(document.body.style);
</script>
</body>
</html>
