画板效果_huaban.beginx = e.pagex - farmmap.offsetleft;-CSDN博客

画板

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
	*{margin:0;padding:0;box-sizing: border-box;}
	body{width:100vw;height:100vh;display:flex;flex-direction:column;justify-content:flex-start;}
	.caidan{display:flex;justify-content:space-around;align-items:center;height:100px;width:100vw;border:3px solid #ccc;}
	.btn,.btn1,.btn2{width:150px;height:50px;border:1px solid #eee;border-radius:20px;text-align:center;line-height:50px;color:#999;}
	#canvas{flex:1;width:100vw;}
	.btn.active,.btn1.active{box-shadow: 0 0 20px deeppink;}
	.line{display:flex;justify-content:center;align-items:center;}
	.xi:after{content:"";background-color:#333;width:6px;height:6px;display:block;border-radius:3px;}
	.normal:after{content:"";background-color:#333;width:16px;height:16px;display:block;border-radius:8px;}
	.cu:after{content:"";background-color:#333;width:32px;height:32px;display:block;border-radius:16px;}
	/* 弹窗 */
	#alert{position:absolute;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0,0,0,0.5);display:flex;justify-content:center;align-items:center;}
	#box{width:500px;height:400px;background-color:#fff;}
	#alert.close{display:none;}
	.xx{text-align:right;margin-right:10px;}
	.img{text-align:center;}
	#img{width:400px;height:300px;border:1px solid #eee;}
	#btns{display:flex;justify-content:space-around;}
	#btns button{width:100px;height:30px;text-align:center;}
	</style>
</head>
<body>
<div class="caidan">
	<div class="btn" id="huabi">画笔</div>
	<div class="btn" id="rect">矩形</div>
	<div class="btn">圆形</div>
	<div class="btn2 download">下载图片</div>
	<a href="" download="download"></a>
	<div class="btn1 line xi active"></div>
	<div class="btn1 line normal"></div>
	<div class="btn1 line cu"></div>
	<div class="btn2"><input type="color" name="color" id="color" /></div>
</div>
<canvas id="canvas" width="600" height="200"></canvas>
<div id="alert" class="close">
	<div id="box">
		<div class="xx">x</div>
		<div class="img">
			<img id="img" src="" />
		</div>
		<div id="btns">
			<button class="down">确认</button>
			<button class="xx">取消</button>
		</div>
	</div>
</div>
<script>
	let canvas = document.querySelector('#canvas');
	canvas.setAttribute("width",canvas.offsetWidth);
	canvas.setAttribute("height",canvas.offsetHeight);
	let cxt = canvas.getContext("2d");
	let allBtn = document.querySelectorAll('.btn');
	let huabiBtn = document.querySelector('#huabi');
	let rectBtn = document.querySelector('#rect');
	let lineDivs = document.querySelectorAll(".line");
	let colorInput = document.querySelector('#color');
	let download = document.querySelector('.download');
	let alertView = document.querySelector('#alert');
	let closeBtn = document.querySelectorAll('.xx');
	let down = document.querySelector('.down');
	let imgCon =document.querySelector('#img');
	let aDom =document.querySelector('a');
	
	var huaban={
		type:"none",
		isDraw:false,
		beginX:0,
		beginY:0,
		imageData:null,
		lineWidth:6,
		color:"#000",
		huabiFn:function(e){
			let x=e.pageX - canvas.offsetLeft;
			let y=e.pageY - canvas.offsetTop;
			cxt.lineTo(x,y);
			cxt.strokeStyle = huaban.color;
			cxt.lineWidth = huaban.lineWidth;
			cxt.lineCap="round";
			cxt.lineJoin="round";
			cxt.stroke();
		},
		rectFn:function(e){
			let x=e.pageX - canvas.offsetLeft;
			let y=e.pageY - canvas.offsetTop;
			cxt.clearRect(0,0,canvas.offsetWidth,canvas.offsetHeight);
			if(huaban.imageData!=null){
				cxt.putImageData(huaban.imageData,0,0,0,0,canvas.offsetWidth,canvas.offsetHeight);
			}
			cxt.beginPath();
			cxt.rect(huaban.beginX,huaban.beginY,x-huaban.beginX,y-huaban.beginY);
			cxt.lineWidth = huaban.lineWidth;
			cxt.strokeStyle = huaban.color;
			cxt.stroke();
			cxt.closePath();
		}
	}
	huabiBtn.onclick=function(){
		allBtn.forEach(function(item,i){
			item.classList.remove("active");
		})
		huabiBtn.classList.add("active");
		huaban.type="huabi";
	}
	huabiBtn.click();
	rectBtn.onclick=function(){
		allBtn.forEach(function(item,i){
			item.classList.remove("active");
		})
		rectBtn.classList.add("active");
		huaban.type="rect";
	}
	//设置粗细
	lineDivs.forEach(function(item,i){
		item.onclick=function(){
			lineDivs.forEach(function(a,b){
				a.classList.remove('active');
			})
			item.classList.add('active');
			if(i==0){
				huaban.lineWidth=6;
			}else if(i==1){
				huaban.lineWidth=16;
			}else if(i==2){
				huaban.lineWidth=32;
			}
		}
	})
	//监听颜色更改事件
	colorInput.onchange=function(e){
		huaban.color=colorInput.value;
	}
	//下载图片
	download.onclick=function(){
		let url = canvas.toDataURL();
		// console.log(url);
		alertView.classList.remove('close');
		imgCon.setAttribute('src',url);
		aDom.setAttribute("href",url);
	}
	//关闭弹窗
	closeBtn.forEach(function(item,i){
		item.onclick=function(){
			alertView.classList.add('close');
		}
	})
	//确认下载
	down.onclick=function(){
		aDom.click();
	}
	
	
	
	canvas.onmousedown=function(e){
		huaban.isDraw=true;
		if(huaban.type=="rect"){
			let x=e.pageX - canvas.offsetLeft;
			let y=e.pageY - canvas.offsetTop;
			huaban.beginX=x;
			huaban.beginY=y;
		}
		if(huaban.type=="huabi"){
			let x=e.pageX - canvas.offsetLeft;
			let y=e.pageY - canvas.offsetTop;
			huaban.beginX=x;
			huaban.beginY=y;
			cxt.beginPath();
			cxt.moveTo(x,y)
		}
	}
	canvas.onmouseup=function(){
		huaban.imageData =cxt.getImageData(0,0,canvas.offsetWidth,canvas.offsetHeight);
		huaban.isDraw=false;
		if(huaban.type=="huabi"){
			cxt.closePath();
		}
	}
	canvas.onmousemove=function(e){
		if(huaban.isDraw){
			huaban[huaban.type+'Fn'](e);
		}
	}
</script>
</body>
</html>