kairyou/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scratchcard</title>
</head>
<body>
<div class="box">
<div class="content">
    <img src="http://img2.pengfu.cn/big/138/140138.jpg">
</div>
<div class="mask"><canvas id="j-cvs"></canvas></div>
</div>
</body>
</html>

## script.js
var doc = document,
    cvs = document.getElementById('j-cvs'), ctx,
config = {
    w: 400, h: 360
},
mouseDown = false;

function getLocalCoords(elem, ev) {
    var ox = 0, oy = 0;
    var first;
    var pageX, pageY;
    // currentTarget element.
    while (elem != null) {
        ox += elem.offsetLeft;
        oy += elem.offsetTop;
        elem = elem.offsetParent;
    }
    // fix,<=IE8
    if ("changedTouches" in ev) {
        first = ev.changedTouches[0];
        pageX = first.pageX;
        pageY = first.pageY;
    } else {
        pageX = ev.pageX;
        pageY = ev.pageY;
    }
    return { 'x': pageX - ox, 'y': pageY - oy };
}
function diffTransSize(cxt, threshold, callback){
    if (!'getImageData' in ctx) return; // <=IE8 不支持
    threshold = threshold || 0.5;
    if (threshold >1 || threshold < 0) threshold = 1;
    var imageData = ctx.getImageData(0, 0, cvs.width, cvs.height),
        pix = imageData.data,
        pixLength = pix.length,
        pixelSize = pixLength*0.25;
    var i = 1, k, l=0;
    for (; i <= pixelSize; i++) { // 3, 7, 11 -> 4n-1
        if (0 === pix[4*i-1]) l++;
    };
    if (l>pixelSize * threshold) {
        callback.apply(ctx, [l]);
    };
}
function scratchLine(cvs, x, y, fresh) {
    ctx = cvs.getContext("2d");
    ctx.globalCompositeOperation = 'destination-out';
    ctx.lineWidth = 45;
    ctx.lineCap = ctx.lineJoin = "round";
    ctx.strokeStyle = '#000';
    if (fresh) {
        ctx.beginPath();
        // bug WebKit/Opera/IE9: +0.01
        ctx.moveTo(x+0.1, y);
    }
    ctx.lineTo(x, y);
    ctx.stroke();

    diffTransSize(ctx, 0.5, function() {
        console && console.log('done');
    });
}
function setupCanvases() {
    cvs.width = config.w;
    cvs.height = config.h;
    var ctx = cvs.getContext("2d");
    // add mask
    ctx.fillStyle = '#CCC';
    ctx.fillRect(0, 0, cvs.width, cvs.height);
    // On mouse down
    var mousedown_handler = function(e) {
        var local = getLocalCoords(cvs, e);
        mouseDown = true;
        scratchLine(cvs, local.x, local.y, true);
        if (e.cancelable) { e.preventDefault(); }
        return false;
    };
    // On mouse move
    var mousemove_handler = function(e) {
        if (!mouseDown) { return true; }
        var local = getLocalCoords(cvs, e);

        scratchLine(cvs, local.x, local.y, false);

        if (e.cancelable) { e.preventDefault(); }
        return false;
    };
    // On mouseup
    var mouseup_handler = function(e) {
        if (mouseDown) {
            mouseDown = false;
            if (e.cancelable) { e.preventDefault(); }
            return false;
        }
        return true;
    };
    on(cvs, 'mousedown', mousedown_handler);
    on(cvs, 'touchstart', mousedown_handler);
    on(window, 'mousemove', mousemove_handler);
    on(window, 'touchmove', mousemove_handler);
    on(window, 'mouseup', mouseup_handler);
    on(window, 'touchend', mouseup_handler);
}
function on(E, N, FN){
    E.addEventListener ? E.addEventListener(N, FN, !1) : E.attachEvent('on' + N, FN);
}
setupCanvases();

## style.css
html{background:#F5F5F5;color:#333;-webkit-text-size-adjust:none;-webkit-touch-callout:none;}
body,h1,h2,h3,h4,h5,h6,p{margin:0;}body{font:13px/1.5 arial;font-family:"lucida grande",tahoma}
img{border:0;vertical-align:middle;}body{padding:20px 0;}
.hide{display: none;}
.box, .content{width:400px;height:360px;}
.box img{max-width:400px;max-height: 360px;}
.box{position:relative;overflow:hidden;margin:0 auto;}
.content{position: relative;overflow:hidden;text-align:center;background:#FFF;}
.mask{position:absolute;top:0;left:0;width:400px;height:360px;cursor: pointer;}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Scratchcard</title>
	</head>
	<body>
	<div class="box">
	<div class="content">
	<img src="http://img2.pengfu.cn/big/138/140138.jpg">
	</div>
	<div class="mask"><canvas id="j-cvs"></canvas></div>
	</div>
	</body>
	</html>
	var doc = document,
	cvs = document.getElementById('j-cvs'), ctx,
	config = {
	w: 400, h: 360
	},
	mouseDown = false;

	function getLocalCoords(elem, ev) {
	var ox = 0, oy = 0;
	var first;
	var pageX, pageY;
	// currentTarget element.
	while (elem != null) {
	ox += elem.offsetLeft;
	oy += elem.offsetTop;
	elem = elem.offsetParent;
	}
	// fix,<=IE8
	if ("changedTouches" in ev) {
	first = ev.changedTouches[0];
	pageX = first.pageX;
	pageY = first.pageY;
	} else {
	pageX = ev.pageX;
	pageY = ev.pageY;
	}
	return { 'x': pageX - ox, 'y': pageY - oy };
	}
	function diffTransSize(cxt, threshold, callback){
	if (!'getImageData' in ctx) return; // <=IE8 不支持
	threshold = threshold \|\| 0.5;
	if (threshold >1 \|\| threshold < 0) threshold = 1;
	var imageData = ctx.getImageData(0, 0, cvs.width, cvs.height),
	pix = imageData.data,
	pixLength = pix.length,
	pixelSize = pixLength*0.25;
	var i = 1, k, l=0;
	for (; i <= pixelSize; i++) { // 3, 7, 11 -> 4n-1
	if (0 === pix[4*i-1]) l++;
	};
	if (l>pixelSize * threshold) {
	callback.apply(ctx, [l]);
	};
	}
	function scratchLine(cvs, x, y, fresh) {
	ctx = cvs.getContext("2d");
	ctx.globalCompositeOperation = 'destination-out';
	ctx.lineWidth = 45;
	ctx.lineCap = ctx.lineJoin = "round";
	ctx.strokeStyle = '#000';
	if (fresh) {
	ctx.beginPath();
	// bug WebKit/Opera/IE9: +0.01
	ctx.moveTo(x+0.1, y);
	}
	ctx.lineTo(x, y);
	ctx.stroke();

	diffTransSize(ctx, 0.5, function() {
	console && console.log('done');
	});
	}
	function setupCanvases() {
	cvs.width = config.w;
	cvs.height = config.h;
	var ctx = cvs.getContext("2d");
	// add mask
	ctx.fillStyle = '#CCC';
	ctx.fillRect(0, 0, cvs.width, cvs.height);
	// On mouse down
	var mousedown_handler = function(e) {
	var local = getLocalCoords(cvs, e);
	mouseDown = true;
	scratchLine(cvs, local.x, local.y, true);
	if (e.cancelable) { e.preventDefault(); }
	return false;
	};
	// On mouse move
	var mousemove_handler = function(e) {
	if (!mouseDown) { return true; }
	var local = getLocalCoords(cvs, e);

	scratchLine(cvs, local.x, local.y, false);

	if (e.cancelable) { e.preventDefault(); }
	return false;
	};
	// On mouseup
	var mouseup_handler = function(e) {
	if (mouseDown) {
	mouseDown = false;
	if (e.cancelable) { e.preventDefault(); }
	return false;
	}
	return true;
	};
	on(cvs, 'mousedown', mousedown_handler);
	on(cvs, 'touchstart', mousedown_handler);
	on(window, 'mousemove', mousemove_handler);
	on(window, 'touchmove', mousemove_handler);
	on(window, 'mouseup', mouseup_handler);
	on(window, 'touchend', mouseup_handler);
	}
	function on(E, N, FN){
	E.addEventListener ? E.addEventListener(N, FN, !1) : E.attachEvent('on' + N, FN);
	}
	setupCanvases();
	html{background:#F5F5F5;color:#333;-webkit-text-size-adjust:none;-webkit-touch-callout:none;}
	body,h1,h2,h3,h4,h5,h6,p{margin:0;}body{font:13px/1.5 arial;font-family:"lucida grande",tahoma}
	img{border:0;vertical-align:middle;}body{padding:20px 0;}
	.hide{display: none;}
	.box, .content{width:400px;height:360px;}
	.box img{max-width:400px;max-height: 360px;}
	.box{position:relative;overflow:hidden;margin:0 auto;}
	.content{position: relative;overflow:hidden;text-align:center;background:#FFF;}
	.mask{position:absolute;top:0;left:0;width:400px;height:360px;cursor: pointer;}