用js实现建议绘图板

最新推荐文章于 2023-08-01 09:09:53 发布

小小怪同学呀

最新推荐文章于 2023-08-01 09:09:53 发布

阅读量554

点赞数

分类专栏： javascript 文章标签： javaScript

本文链接：https://blog.csdn.net/xxgTX/article/details/102561127

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍如何利用JavaScript从头构建一个基本的在线绘图板应用，允许用户进行自由绘画和创作。

摘要由CSDN通过智能技术生成

用javaScript来实现一个简易绘图板

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#pos{position: absolute;left:20px;bottom: 20px;}
			.box{border-radius: 50%;position: absolute;}
			input{z-index: 1;position: absolute;}
			#add{left: 0;}
			#red{left: 50px;}
			#color{left: 100px;}
		</style>
	</head>
	<body>
		<input type="button" id="add" value="+" />
		<input type="button" id="red" value="-" />
		<input type="color" id="color" />
		<span id="pos"></span>
	</body>
	<script type="text/javascript">
		
		var opos = document.getElementById("pos");
		
		var w = h = 10;
		var c = "black";
		
		document.onmousemove = function(eve){
			var e = eve ? eve : window.event;
//			console.log(e.clientX,e.clientY)

			var div = document.createElement("div");
			div.className = "box";
			div.style.cssText = "left:"+ e.clientX +"px;top:"+ e.clientY +"px;width:"+ w +"px;height:"+ h +"px;background:"+ c +";"
			document.body.appendChild(div);
			
			opos.innerHTML = e.clientX + "，" + e.clientY;
		}
		
		
		var oAdd = document.getElementById("add")
		var oRed = document.getElementById("red")
		var oColor = document.getElementById("color")
		
//		加和减时修改,宽高的全局变量的值
		oAdd.onclick = function(){
			w+=5;
			h+=5;
		}
		oRed.onclick = function(){
//			要设置最小值,防止不见了
			if(w <= 5){
				w = 5;
				h = 5
			}else{
				w-=5;
				h-=5;
			}
		}
//		改颜色时,一定要找准事件，再设置颜色的全局变量
		oColor.onchange = function(){
			c = this.value;
		}
		
	</script>
</html>