jquery实现擦除效果

快来打我* 2022-09-24 05:13 221阅读 0赞

效果展示：

![Center][]

代码实现：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>刮刮卡</title>
    
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    </head>
    <body>
    	<div class="container">
    		<canvas id="myCanvas_bottom" style="border:1px solid #d3d3d3;position: absolute;">
    		Your browser does not support the HTML5 canvas tag.
    		</canvas>
    		<canvas id="myCanvas_top" style="border:1px solid #d3d3d3;position: absolute;">
    		Your browser does not support the HTML5 canvas tag.
    		</canvas>
    	</div>
    	<script type="text/javascript">
    		var w = 800;
    		var h = 80;
    
    				var mousedown = false;
    
    		//设置底部canvas样式等
    		var canvas_bottom = document.getElementById('myCanvas_bottom');
    		canvas_bottom.width = w;
    		canvas_bottom.height = h;
    		canvas_bottom_ctx = canvas_bottom.getContext('2d');
    		canvas_bottom_ctx.font = '30px Verdana';
    		canvas_bottom_ctx.textAlign = 'left';
    		var gradient = canvas_bottom_ctx.createLinearGradient(0, 0, canvas_bottom.width, 0);
    		gradient.addColorStop(0, 'magenta');
    		gradient.addColorStop(0.5, 'blue');
    		gradient.addColorStop(1, 'red');
    		canvas_bottom_ctx.strokeStyle = gradient;
    		canvas_bottom_ctx.strokeText('谢谢惠顾，感谢您这次的选择', 10, 50); //可自由设定
    
    		//设置顶部canvas
    		var canvas_top = document.getElementById('myCanvas_top');
    		canvas_top.width = w;
    		canvas_top.height = h;
    		var offsetX = canvas_top.offsetLeft;
    		var offsetY = canvas_top.offsetTop;
    		canvas_top_ctx = canvas_top.getContext('2d');
    		canvas_top_ctx.fillStyle = 'gray';
    		canvas_top_ctx.fillRect(0, 0, w, h);
    
    		canvas_top_ctx.globalCompositeOperation = 'destination-out';
    
    		canvas_top.addEventListener('touchstart', eventDown);
    		canvas_top.addEventListener('touchend', eventUp);
    		canvas_top.addEventListener('touchmove', eventMove);
    		canvas_top.addEventListener('mousedown', eventDown);
    		canvas_top.addEventListener('mouseup', eventUp);
    		canvas_top.addEventListener('mousemove', eventMove);
    
    		function eventDown(e){
    	        e.preventDefault();
    	        mousedown=true;
    	    }
    
    	    function eventUp(e){
    	        e.preventDefault();
    	        mousedown=false;
    	    }
    
    	    function eventMove(e){
    	        e.preventDefault();
    	        if(mousedown) {
    	             if(e.changedTouches){
    	                 e=e.changedTouches[e.changedTouches.length-1];
    	             }
    	             var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0;
    	             var y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
    	             with(canvas_top_ctx) {
    	                 beginPath()
    	                 arc(x, y, 10, 0, Math.PI * 2);
    	                 fill();
    	             }
    	        }
    	    }
    	</script>
    </body>
    </html>

[Center]: /images/20220719/e8ad0deb51194fcca38b54e21510951a.png