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

最新推荐文章于 2024-06-07 09:59:54 发布

特立独行的猪鸭

最新推荐文章于 2024-06-07 09:59:54 发布

阅读量3k

点赞数 4

分类专栏：前端文章标签： Canvas画图 Canvas橡皮擦

本文链接：https://blog.csdn.net/qq_40285036/article/details/95729519

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

注：
需要引入Jquery.js ！！！！！
功能演示：
在这里插入图片描述
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>

特立独行的猪鸭

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
Canvas实现画笔功能擦除画笔颜色但不擦除背景

注：需要引入Jquery.js ！！！！！功能演示：html代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>DrawingBoard</title> <script src="jquery.js"></s...
复制链接

扫一扫