canvas实现刮刮卡.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
		canvas{
			border:1px solid black;
		}
	   
	</style>
</head>
<body> 
<canvas width=500 height=500></canvas>
       
<script>
	
	// 残次品 应加上当刮开面积大于50%则全显示，暂时先挖个坑
	var c = document.getElementsByTagName('canvas')[0];
	var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.fillStyle="#666666";
    ctx.fillRect(0,0,500,500); 
    window.onmousemove = function (event) {
    	var disX = event.clientX;
    	var disY = event.clientY;
    	 ctx.clearRect(disX-25, disY-25, 30, 30);
    }
</script>
</body>
</html>