wuliupo/guaguaka.htm

## guaguaka.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>刮刮卡</title>
<style type="text/css">
  h1 {
    text-align: center;
  }
  .ggl {
    position: relative;
    max-width: 500px;
    width: 100%;
    height: 80px;
    line-height: 40px;
    margin: 0 auto;
    text-align: center;
    background-color: #FFF;
  }
  .ggl canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 80px;
    z-index: 2;
  }
  .ggl button {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 200px;
    line-height: 24px;
    border-radius: 5px;
    background-color: #df412b;
    color: #fff;
    outline: none;
    z-index: 1;
  }
</style>
</head>
<body>
<h1>刮刮卡组件</h1>
<div class="ggl">
  <div id="prompt">恭喜您，中奖了！</div>
  <button id="ok">领取奖品</button>
  <canvas id="c1"></canvas>
</div>
<script>
  //控制刮卡次数
  var c1; //画布
  var ctx; //画笔
  var isMouseDown; //标志用户是否按下鼠标或开始触摸
  var isOk = 0; //标志用户是否已经刮开了一半以上
  /* 页面加载后开始初始化画布 */
  window.onload = function () {
    c1 = document.getElementById("c1");
    //这里很关键，canvas自带两个属性width、height,是画布的分辨率，跟style中的width、height意义不同。
    //最好设置成跟画布在页面中的实际大小一样
    //不然canvas中的坐标跟鼠标的坐标无法匹配
    c1.width = c1.clientWidth;
    c1.height = c1.clientHeight;
    ctx = c1.getContext("2d");
    //PC端的处理
    c1.addEventListener("mousemove", eventMove, false);
    c1.addEventListener("mousedown", eventDown, false);
    c1.addEventListener("mouseup", eventUp, false);
    //移动端的处理
    c1.addEventListener('touchstart', eventDown, false);
    c1.addEventListener('touchend', eventUp, false);
    c1.addEventListener('touchmove', eventMove, false);
    //初始化画布，画灰色的矩形铺满
    //网上的做法是给canvas设置一张背景图片，我这里的做法是直接在canvas下面另外放了个div。
    ctx.globalCompositeOperation = "source-over";
    ctx.fillStyle = '#AAA';
    ctx.fillRect(0, 0, c1.clientWidth, c1.clientHeight);
    ctx.fill();
    ctx.font = "Bold 30px Arial";
    ctx.textAlign = "center";
    ctx.fillStyle = "#999";
    ctx.fillText("刮一刮", c1.width / 2, 50);
    //把这个属性设为这个就可以做出圆形橡皮擦的效果
    //有些老的手机自带浏览器不支持destination-out,下面的代码中有修复的方法
    ctx.globalCompositeOperation = 'destination-out';
  }
  //鼠标按下 和 触摸开始
  function eventDown(e) {
    e.preventDefault();
    isMouseDown = true;
    // TODO 做个开关，第一次鼠标按下，去后台取数据
  }
  //鼠标抬起 和 触摸结束
  function eventUp(e) {
    e.preventDefault();
    //得到canvas的全部数据
    var a = ctx.getImageData(0, 0, c1.width, c1.height);
    var j = 0;
    for (var i = 3; i < a.data.length; i += 4) {
      if (a.data[i] == 0) j++;
    }
    //当被刮开的区域等于一半时，则可以开始处理结果
    if (j >= a.data.length / 8) {
      isOk = 1;
    }
    isMouseDown = false;
  }
  //鼠标移动 和 触摸移动
  function eventMove(e) {
    e.preventDefault();
    if (isMouseDown) {
      if (e.changedTouches) {
        e = e.changedTouches[e.changedTouches.length - 1];
      }
      var oX = c1.offsetLeft + c1.parentNode.offsetLeft,
        oY = c1.offsetTop + c1.parentNode.offsetTop;
      var x = (e.clientX + document.body.scrollLeft || e.pageX) - oX || 0,
        y = (e.clientY + document.body.scrollTop || e.pageY) - oY || 0;
      //画360度的弧线，就是一个圆，因为设置了ctx.globalCompositeOperation = 'destination-out';
      //画出来是透明的
      ctx.beginPath();
      ctx.arc(x, y, 16, 0, Math.PI * 2, true);
      //下面3行代码是为了修复部分手机浏览器不支持destination-out
      c1.style.display = 'none';
      c1.offsetHeight;
      c1.style.display = '';
      ctx.fill();
    }
    if (isOk) {
      document.getElementById("ok").style.zIndex = '3';
    }
  }
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>刮刮卡</title>
	<style type="text/css">
	h1 {
	text-align: center;
	}
	.ggl {
	position: relative;
	max-width: 500px;
	width: 100%;
	height: 80px;
	line-height: 40px;
	margin: 0 auto;
	text-align: center;
	background-color: #FFF;
	}
	.ggl canvas {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 80px;
	z-index: 2;
	}
	.ggl button {
	position: relative;
	display: block;
	margin: 0 auto;
	width: 200px;
	line-height: 24px;
	border-radius: 5px;
	background-color: #df412b;
	color: #fff;
	outline: none;
	z-index: 1;
	}
	</style>
	</head>
	<body>
	<h1>刮刮卡组件</h1>
	<div class="ggl">
	<div id="prompt">恭喜您，中奖了！</div>
	<button id="ok">领取奖品</button>
	<canvas id="c1"></canvas>
	</div>
	<script>
	//控制刮卡次数
	var c1; //画布
	var ctx; //画笔
	var isMouseDown; //标志用户是否按下鼠标或开始触摸
	var isOk = 0; //标志用户是否已经刮开了一半以上
	/* 页面加载后开始初始化画布 */
	window.onload = function () {
	c1 = document.getElementById("c1");
	//这里很关键，canvas自带两个属性width、height,是画布的分辨率，跟style中的width、height意义不同。
	//最好设置成跟画布在页面中的实际大小一样
	//不然canvas中的坐标跟鼠标的坐标无法匹配
	c1.width = c1.clientWidth;
	c1.height = c1.clientHeight;
	ctx = c1.getContext("2d");
	//PC端的处理
	c1.addEventListener("mousemove", eventMove, false);
	c1.addEventListener("mousedown", eventDown, false);
	c1.addEventListener("mouseup", eventUp, false);
	//移动端的处理
	c1.addEventListener('touchstart', eventDown, false);
	c1.addEventListener('touchend', eventUp, false);
	c1.addEventListener('touchmove', eventMove, false);
	//初始化画布，画灰色的矩形铺满
	//网上的做法是给canvas设置一张背景图片，我这里的做法是直接在canvas下面另外放了个div。
	ctx.globalCompositeOperation = "source-over";
	ctx.fillStyle = '#AAA';
	ctx.fillRect(0, 0, c1.clientWidth, c1.clientHeight);
	ctx.fill();
	ctx.font = "Bold 30px Arial";
	ctx.textAlign = "center";
	ctx.fillStyle = "#999";
	ctx.fillText("刮一刮", c1.width / 2, 50);
	//把这个属性设为这个就可以做出圆形橡皮擦的效果
	//有些老的手机自带浏览器不支持destination-out,下面的代码中有修复的方法
	ctx.globalCompositeOperation = 'destination-out';
	}
	//鼠标按下和触摸开始
	function eventDown(e) {
	e.preventDefault();
	isMouseDown = true;
	// TODO 做个开关，第一次鼠标按下，去后台取数据
	}
	//鼠标抬起和触摸结束
	function eventUp(e) {
	e.preventDefault();
	//得到canvas的全部数据
	var a = ctx.getImageData(0, 0, c1.width, c1.height);
	var j = 0;
	for (var i = 3; i < a.data.length; i += 4) {
	if (a.data[i] == 0) j++;
	}
	//当被刮开的区域等于一半时，则可以开始处理结果
	if (j >= a.data.length / 8) {
	isOk = 1;
	}
	isMouseDown = false;
	}
	//鼠标移动和触摸移动
	function eventMove(e) {
	e.preventDefault();
	if (isMouseDown) {
	if (e.changedTouches) {
	e = e.changedTouches[e.changedTouches.length - 1];
	}
	var oX = c1.offsetLeft + c1.parentNode.offsetLeft,
	oY = c1.offsetTop + c1.parentNode.offsetTop;
	var x = (e.clientX + document.body.scrollLeft \|\| e.pageX) - oX \|\| 0,
	y = (e.clientY + document.body.scrollTop \|\| e.pageY) - oY \|\| 0;
	//画360度的弧线，就是一个圆，因为设置了ctx.globalCompositeOperation = 'destination-out';
	//画出来是透明的
	ctx.beginPath();
	ctx.arc(x, y, 16, 0, Math.PI * 2, true);
	//下面3行代码是为了修复部分手机浏览器不支持destination-out
	c1.style.display = 'none';
	c1.offsetHeight;
	c1.style.display = '';
	ctx.fill();
	}
	if (isOk) {
	document.getElementById("ok").style.zIndex = '3';
	}
	}
	</script>
	</body>
	</html>