master

分支 (1)

管理

管理

master

H5-Games
/
draw_board.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>画板-画线-矩形-圆</title>
	<style>
		ul,li{
			list-style: none;
		}
		#coord{
			width: 200px;
			height: 50px;
			margin: 50px auto 20px;
			background: yellow;
			font-size: 12px;
			text-align: center;
			padding-top: 8px;
		}
		#myCanvas{
			display: block;
			margin: 0 auto;
			background: #ccc;
		}
		#lineWidth{
			position: absolute;
			top: 100px;
			left: 10px;
		}
		#lineWidth li{
			margin-bottom: 10px;
		}
		#lineWidth li:nth-child(n+2){
			margin-bottom: 10px;
			background: black;
		}
		#tuXing{
			position: absolute;
			top: 300px;
			left: 10px;
		}
		#tuXing li{
			margin-bottom: 10px;
			padding: 5px;
		}
		#colorSelect{
			position: absolute;
			top: 100px;
			right: 10px;
		}
		#colorSelect li{
			margin-bottom: 10px;
			padding: 5px;
		}
	</style>
</head>
<body>
	<div id="coord"></div>
	<canvas id="myCanvas" width="600" height="400" onmousedown="mouseDown(event,this);" onmousemove="mouseMove(event,this);" onmouseup="mouseUp(event,this);"></canvas>

	<ul id="lineWidth">
		<li>线条宽度</li>
		<li id="line_1" style="width:100px;height:1px;cursor:pointer;border:5px solid white;border-left:0;" onclick="changeWidth(1);"></li>
		<li id="line_2" style="width:100px;height:10px;background:black;cursor:pointer;" onclick="changeWidth(10);"></li>
		<li id="line_3" style="width:100px;height:20px;background:black;cursor:pointer;" onclick="changeWidth(20);"></li>
		<li id="line_4" style="width:100px;height:30px;background:black;cursor:pointer;" onclick="changeWidth(30);"></li>
	</ul>

	<ul id="tuXing">
		<li>图形选择</li>
		<li id="graph_1" style="width:15px;height:15px;border:1px solid black;cursor:pointer;" onclick="changeGraph('curve');">～</li>
		<li id="graph_2" style="width:15px;height:15px;border:1px solid black;cursor:pointer;" onclick="changeGraph('line');">＼</li>
		<li id="graph_3" style="width:15px;height:15px;border:1px solid black;cursor:pointer;" onclick="changeGraph('rect');">□</li>
		<li id="graph_4" style="width:15px;height:15px;border:1px solid black;cursor:pointer;" onclick="changeGraph('circle');">○</li>
	</ul>

	<ul id="colorSelect">
		<li>颜色选择</li>
		<li id="color_1" style="width:15px;height:15px;border:1px solid black;cursor:pointer;background:black;" onclick="changeColor('black');"></li>
		<li id="color_2" style="width:15px;height:15px;border:1px solid black;cursor:pointer;background:red;" onclick="changeColor('red');"></li>
		<li id="color_3" style="width:15px;height:15px;border:1px solid black;cursor:pointer;background:green;" onclick="changeColor('green');"></li>
		<li id="color_4" style="width:15px;height:15px;border:1px solid black;cursor:pointer;background:blue;" onclick="changeColor('blue');"></li>
		<li>删除色</li>
		<li id="color_5" style="width:15px;height:15px;border:1px solid black;cursor:pointer;background:#ccc;" onclick="changeColor('#ccc');"></li>
	</ul>

	<script>
		var myCanvas=document.getElementById('myCanvas');
		var ctx=myCanvas.getContext("2d");
		var flag=false;
		var draw_width=1;
		var draw_graph="curve";
		var draw_color="black";
		var x_init;//初始点的x坐标
		var y_init;//初始点的y坐标
		var clearWidth=0;//擦除的宽带
		var clearHeight=0;//擦除的高度
		var imgData;//保存画布前一步的信息

		var n=0;

		function showMousePosition(e){
			document.getElementById('coord').innerHTML="鼠标在画布中的<br>横坐标是："+(e.clientX-myCanvas.offsetLeft)+"<br>纵坐标是："+(e.clientY-myCanvas.offsetTop);

		}
		// console.log(window.clientX,window.clientY,myCanvas.offsetLeft,myCanvas.offsetTop);

		window.onload=showMousePosition(event);
		function changeWidth(num){
			draw_width=num;
		}
		function changeGraph(str){
			draw_graph=str;
		}
		function changeColor(str){
			console.log(str);
			draw_color=str;
		}

		function mouseDown(e,obj) {
			ctx.beginPath();
			x_init=e.clientX-obj.offsetLeft;
			y_init=e.clientY-obj.offsetTop;

			switch(draw_graph){
				case "curve":
					ctx.moveTo(x_init,y_init);
					ctx.lineWidth=draw_width;
					ctx.strokeStyle=draw_color;
					break;
				case "line":
					imgData=ctx.getImageData(0,0,myCanvas.width,myCanvas.height);
					ctx.moveTo(x_init,y_init);
					ctx.lineWidth=draw_width;
					ctx.strokeStyle=draw_color;
					break;
				case "rect":
					imgData=ctx.getImageData(0,0,myCanvas.width,myCanvas.height);
					ctx.fillStyle=draw_color;
					ctx.fillRect(x_init,y_init,0,0);
					break;
				case "circle":
					imgData=ctx.getImageData(0,0,myCanvas.width,myCanvas.height);
					ctx.fillStyle=draw_color;
					ctx.arc(x_init,y_init,0,0,Math.PI*2);
					ctx.fill();
					break;

			};

			flag=true;
		}
		function mouseMove(e,obj) {
				var x=e.clientX-obj.offsetLeft;
				var y=e.clientY-obj.offsetTop;
				document.getElementById('coord').innerHTML="鼠标在画布中的<br>横坐标是："+x+"<br>纵坐标是："+y;
			if (flag==true) {

				switch(draw_graph){
					case "curve":
						ctx.lineTo(x,y);
						ctx.stroke();
						ctx.moveTo(x,y);
						break;
					case "line":

						ctx.beginPath();
						ctx.fillStyle = "#CCCCCC";
   						ctx.fillRect(0,0,myCanvas.width, myCanvas.height);
						ctx.closePath();
						ctx.fill();

						ctx.putImageData(imgData,0,0);

						ctx.beginPath();
						ctx.stokeStyle = draw_color;
						ctx.moveTo(x_init,y_init);
						ctx.lineTo(x,y);
						ctx.stroke();
						// ctx.moveTo(x,y);
						break;
					case "rect":

						ctx.beginPath();
						ctx.fillStyle = "#CCCCCC";
   						ctx.fillRect(0,0,myCanvas.width, myCanvas.height);
						ctx.closePath();
						ctx.fill();

						ctx.putImageData(imgData,0,0);

						ctx.beginPath();
						ctx.fillStyle = draw_color;
						// ctx.clearRect(x_init,y_init,clearWidth,clearHeight);
						ctx.fillRect(x_init,y_init,x-x_init,y-y_init);
						// clearWidth=x-x_init;
						// clearHeight=y-y_init;
						break;
					case "circle":

						ctx.beginPath();
						ctx.fillStyle = "#CCCCCC";
   						ctx.fillRect(0,0,myCanvas.width, myCanvas.height);
						ctx.closePath();
						ctx.fill();

						ctx.putImageData(imgData,0,0);

						ctx.beginPath();
						ctx.fillStyle = draw_color;
						var R=Math.sqrt(Math.pow(x-x_init,2)+Math.pow(y-y_init,2));//圆半径
						ctx.arc(x_init,y_init,R,0,Math.PI*2);
						ctx.closePath();
						ctx.fill();

						break;
				};
			};

		}
		function mouseUp(e,obj) {
			var x=e.clientX-obj.offsetLeft;
			var y=e.clientY-obj.offsetTop;


			switch(draw_graph){
				case "curve":
					ctx.lineTo(x,y);
					ctx.stroke();
					break;
				case "line":
					ctx.lineTo(x,y);
					ctx.stroke();
					break;
				case "rect":
					ctx.fillRect(x_init,y_init,x-x_init,y-y_init);
					ctx.fill();
					clearWidth=0;
					clearHeight=0;
					break;
				case "circle":
					var R=Math.sqrt(Math.pow(x-x_init,2)+Math.pow(y-y_init,2));//圆半径
					ctx.arc(x_init,y_init,R,0,Math.PI*2);
					ctx.fill();
					break;
			};
			flag=false;
			ctx.closePath();
		}
	</script>
</body>
</html>