涂抹CANVAS，判断清除完毕执行操作

涂抹CANVAS，判断清除完毕执行操作

clearCanvas.js代码如下：

function clearCanvas(imgSrc,Bl,callback){
	var ctx = null;
	var mouseX = null;
	var mouseY = null;
	var _width = 0;
	var _height = 0;
	function touchStartEvent(e){
		mouseX = event.touches[0].pageX;
		mouseY = event.touches[0].pageY;
		return false;
	}
	function touchEndEvent(e){
		mouseX = null;
		mouseY = null;
	
		var imgdata = ctx.getImageData(0,0,_width,_height);
		var Black = 0;
		var All = 0;
		for(var i = 0;i 128) {
					Black++;
				}
				All++;
			}
		}
		console.log(Black , All);
		if(Black/All < Bl){
			$("#mycanvas").fadeOut(500,function(){
				$(this).remove();
				callback();
			});
		}
		return false;
	}
	function touchMoveEvent(e){
		e.preventDefault();
		var mx = event.touches[0].pageX;
		var my = event.touches[0].pageY;
		if(mouseX != null && mouseY != null){
			clearCircle(mx,my,20);
			if(Math.abs(mx-mouseX)>2 || Math.abs(my-mouseY) >=2){
				clearCircle((mx+mouseX)/2,(my+mouseY)/2,20);
			}
			mouseX = mx;
			mouseY = my;
		}
	}
	function clearCircle( x , y , r ){
		for( var i = 0 ; i < Math.round( Math.PI * r ) ; i+=.5 ){
			var angle = ( i / Math.round( Math.PI * r )) * 360;
			ctx.clearRect( x , y , Math.sin( angle * ( Math.PI / 180 )) * r , Math.cos( angle * ( Math.PI / 180 )) * r );
		}
	}

	//
	var newCanvas = document.createElement('canvas');
	newCanvas.setAttribute('id','mycanvas');
	newCanvas.setAttribute('style','width:100%; height:100%; position:absolute; left:0; top:0;');
	document.body.appendChild(newCanvas);
	//document.getElementById('page1').appendChild(newCanvas);

	_width = $("#mycanvas").width();
	_height = $("#mycanvas").height();
	//var mycanvas = document.getElementById("mycanvas");
	var mycanvas = newCanvas;
	mycanvas.setAttribute("width",_width);
	mycanvas.setAttribute("height",_height);

	ctx = mycanvas.getContext("2d");
	ctx.fillStyle = "rgba(0,0,0,0)";
	ctx.fillRect(0,0,_width,_height);
	
	var newImg = new Image();
	//newImg.src = 'test.png';
	newImg.src = imgSrc;
	newImg.onload = function(){
		ctx.drawImage(newImg,0,0,_width,_height);
	}

	mycanvas.addEventListener("touchstart",touchStartEvent,false);
	mycanvas.addEventListener("touchend",touchEndEvent,false);
	mycanvas.addEventListener("touchmove",touchMoveEvent,false);
}

示例HTMML代码：