Canvas实现画笔功能擦除画笔颜色但不擦除背景

不念不忘少年蓝@ 2021-12-13 02:37 547阅读 0赞

注：  
需要引入Jquery.js ！！！！！  
功能演示：  
![在这里插入图片描述][20190713104634346.gif]  
html代码:

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>DrawingBoard</title>
    		
    		<script src="jquery.js"></script>
    		
    	</head>
    	<body>
    		选择画笔颜色：<input type="color" id="color" />
    		选择画笔类型：画笔<input type="radio" name="way" value="hb" checked="true"/>
    		，橡皮擦<input type="radio" name="way" value="xp" />
    		<br>
    		<canvas id="oriCanvas" ></canvas>
    		<canvas id="dstCanvas" ></canvas>
    	</body>
    	
    	<script>
    		// --------- 加载图像 ----------
    		var oriCanvas = document.getElementById("oriCanvas");
    		var dstCanvas = document.getElementById("dstCanvas");
    		var dstCtx = dstCanvas.getContext("2d");
    		var oriCtx = oriCanvas.getContext("2d");
    		
    		var image = new Image();
    		image.src = "C:\\Users\\Administrator\\Desktop\\1.jpg";
    		
    		image.onload = function(){
         
    			dstCanvas.width = this.width;
    			dstCanvas.height = this.height;
    			dstCtx.drawImage(this, 0, 0);
    			
    			oriCanvas.width = this.width;
    			oriCanvas.height = this.height;
    			oriCtx.drawImage(this, 0, 0);
    		}
    		// --------- 加载图像 ----------
    		// --------- 画笔和橡皮擦功能实现 -------------
    		var flag = false;  // 记录鼠标按下和抬起时间  标记画笔是否开始工作
    		var isXp = false; // 记录画笔是橡皮还是画笔
    		var lineWidth = 50; // 设置画笔粗细
    		
    		// 设置画笔颜色
    		var theColor=document.getElementById("color");
    			theColor.onchange=function(){
         
    			dstCtx.strokeStyle=this.value;
    		}
    		
    		$('input[type=radio][name=way]').change(function() {
         
    			if (this.value == 'xp') {
         
    				isXp = true;
    			}
    			else if (this.value == 'hb') {
         
    				isXp = false;
    			}
    		});
    		
    		dstCanvas.onmousedown=function(eva){
         
    			var eva=eva||window.event;
    			dstCtx.lineCap="round";
    			dstCtx.lineJoin="round";
    			var x=eva.offsetX;
    			var y=eva.offsetY;
    			dstCtx.beginPath();
    			dstCtx.moveTo(x,y);
    			flag=true;
    			
    			dstCtx.lineWidth = lineWidth; 	
    			dstCtx.strokeStyle= document.getElementById("color").value;
    		}
    		dstCanvas.onmousemove=function(eva){
         
    			if(flag){
          
    				if(isXp){
         
    					var w = lineWidth;
    					let pxs = oriCtx.getImageData(eva.offsetX-w/2, eva.offsetY-w/2, w, w);
    					dstCtx.putImageData(pxs, eva.offsetX-w/2, eva.offsetY-w/2);
    				}
    				else{
         
    					var eva=eva||window.event;
    					var x=eva.offsetX;
    					var y=eva.offsetY;
    					dstCtx.lineTo(x,y);
    					dstCtx.stroke();
    				}
    			}
    		}
    		
    		dstCanvas.onmouseup=function(){
         
    			flag=false;
    			dstCtx.closePath();
    		}
    		dstCanvas.onmouseleave=function(){
         
    			flag=false;
    			dstCtx.closePath();
    		}
    		
    		// --------- 画笔和橡皮擦功能实现 -------------
    	</script>
    	
    </html>

[20190713104634346.gif]: /images/20211210/d94bdd511dbc4a598b1d4909310016f4.png