SOURCE

var canvas = document.getElementById('canvas');
	var canvasBound = canvas.getBoundingClientRect();
	var ctx = canvas.getContext('2d');
	canvas.width = canvasBound.width;
	canvas.height = canvasBound.height;
	ctx.fillStyle = '#d8d8d8';
	ctx.fillRect(0 ,0 ,canvas.width,canvas.height);
	ctx.font = "20px";
	ctx.fillStyle = '#666'
	ctx.textAlign = 'center';
	ctx.textBaseline = 'middle';
	ctx.fillText('我擦',canvas.width/2,canvas.height/2);
	var currentX = 0,currentY = 0,isStart = false;
	var start = function(e){
		isStart = true;
		e.preventDefault();
		var pageX = e.pageX || e.targetTouches[0].pageX;
		var pageY = e.pageY || e.targetTouches[0].pageY;
		currentX = pageX - canvasBound.left
		currentY = pageY - canvasBound.top
		clean(ctx,currentX,currentY)
	};
	var move = function(e){
		if(!isStart)return;
		e.preventDefault();
		var pageX = e.pageX || e.targetTouches[0].pageX;
		var pageY = e.pageY || e.targetTouches[0].pageY;
		currentX = pageX - canvasBound.left
		currentY = pageY - canvasBound.top
		clean(ctx,currentX,currentY)
	}
	var end = function(e){
		isStart = false;
		var pageX = e.pageX || e.targetTouches[0].pageX;
		var pageY = e.pageY || e.targetTouches[0].pageY;
		currentX = pageX - canvasBound.left
		currentY = pageY - canvasBound.top
		//var percent = getTransparentPercent(ctx,canvas.width,canvas.height)

	}
	canvas.addEventListener('touchstart',start,false)
	canvas.addEventListener('touchmove',move,false)
	canvas.addEventListener('touchend',end,false)
	canvas.addEventListener('mousedown',start,false)
	canvas.addEventListener('mousemove',move,false)
	canvas.addEventListener('mouseleave',end,false)
	
	function clean(context,x,y,width,height){
		var radgrad = context.createRadialGradient(x, y, 0, x, y, 30);
		context.globalCompositeOperation = "destination-out";
		radgrad.addColorStop(0, 'rgba(255, 255, 255,0.6)');
		radgrad.addColorStop(1, 'rgba(255, 255, 255, 0)');
		context.fillStyle = radgrad;
		context.arc(x, y, 20, 20, Math.PI * 2, true);
		context.fill();
	  	context.restore();
	}
	function getTransparentPercent(ctx, width, height) {
	    var imgData = ctx.getImageData(0, 0, width, height),
	        pixles = imgData.data,
	        transPixs = [];
	    for (var i = 0, j = pixles.length; i < j; i += 4) {
	        var a = pixles[i + 3];
	        if (a < 128) {
	            transPixs.push(i);
	        }
	    }
	    return (transPixs.length / (pixles.length / 4) * 100).toFixed(2);
	}

<div>
	哦呵呵
	<canvas id="canvas"></canvas>
</div>

div{
		position: relative;
		width: 140px;
		height:60px;
		border:1px solid #d8d8d8;
		margin: 50px;
	}
	p{
		position: absolute;
		left: 0;
		top: 0;
		width: 140px;
		height:60px;
		z-index: 2;
	}
	canvas{
		position: absolute;
		left: 0;
		top: 0;
		width: 140px;
		height:60px;
		cursor:pointer;
		z-index: 3;
	}