刮刮奖游戏 在H5开发中 是很常见的小游戏，实现起来也很简单，如下：
利用 cxt.globalCompositeOperation = 'destination-out';
这一api,实现刮刮奖效果。具体代码如下：
html很简单，就是一个canvas元素，定义宽高。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>刮刮奖</title>
</head>
<body>
<div class="container">
<canvas id="zwhCanvas" width="512" height="384"></canvas>
</div>
</body>
</html>接下来是css，也很简单，注意引入背景图。
* {
margin: 0;
padding: 0;
}
.container {
margin: 0 auto;
text-align: center;
}
.container canvas {
background: url(img/Koala.jpg) no-repeat center center/100% 100%;
cursor: pointer;
}重点是js，最下面的getTransparent()这个方法。
使用getImageData(x, y, dx, dy)可以获取canvas的像素信息
方法由环境对象调用（我们这里是cxt）
（同样受同源策略限制）
前两个参数是要获取图像信息的起始坐标，后两个参数就是要获取图像信息的宽高
（类似于矩形绘制函数）
这个方法返回一个ImageData对象（包括像素信息数组data还有宽高width/height）
我们主要用这个对象的data属性
假如我们画布的大小是500×500
所以获取canvas上所有像素信息就是这样：
console.log(cxt.getImageData(0, 0, 500, 500).data);我们发现这个数组的长度为100w，
假如我们的canvas有四个像素点
每个像素点信息有分为RGBA四个方面的值
那么数组长度就应该是4×4 = 16
它们分别是
1R 1G 1B 1A
2R 2G 2B 2A
3R 3G 3B 3A
4R 4G 4B 4A
假如我们这里的canvas一共有500×500 = 25w个像素点
所以像素信息数组大小为 25w×4 = 100w
var can = document.getElementById("zwhCanvas");
var w = can.width;
var h = can.height;
var cxt = can.getContext("2d");
cxt.fillStyle = "lightgray";
cxt.fillRect(0, 0, w, h);
cxt.globalCompositeOperation = 'destination-out';
cxt.lineWidth = '30';
cxt.lineCap = 'round';
can.onmousedown = function(event) {
var ev = ev || window.event;
var lastw = ev.clientX - can.offsetLeft;//获取鼠标相对于canvas画布的x,y值
var lasth = ev.clientY - can.offsetTop;//
cxt.lineTo(lastw, lasth);
cxt.beginPath();
can.onmousemove = function(event) {
var ev = ev || window.event;
var lastw = ev.clientX - can.offsetLeft;
var lasth = ev.clientY - can.offsetTop;
cxt.lineTo(lastw, lasth);
cxt.stroke();
}
can.onmouseup = function(event) {
can.onmousemove = null;
getTransparent();//在这里调用获取面积比的方法，来提示用户是否中奖。
}
}
/*
* 获取透明的与不透明的比例从而 知道用户刮了的面积占总面积的百分比
*/
function getTransparent() {
var tr = 0;
var notr = 0;
cxt.getImageData(0, 0, w, h).data.forEach(function(item, index) {
if(index % 4 == 3) {
if(item == 0) {
tr++;
} else if(item == 255) {
notr++;
}
}
});
console.log('tr:' + tr);
console.log('notr:' + notr);
console.log("比例:" + tr / (notr + tr));
}最后 打印出来的比值，就是透明的占画布的总比值。