纯HTML的网页绘画板

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}
		
		#mycanvas {
			border: 1px solid red;
		}
		
		#box {
			width: 200px;
			height: 50px;
			display: flex;
			border-radius: 50%;
		}
		
		#box div {
			flex: 1;
			background: red;
			border-radius: 50%;
			border: 1px solid #ccc;
			color: red;
			text-align: center;
			font-size: 2px;
			;
		}
		
		#box1 {
			width: 200px;
			height: 50px;
			display: flex;
			border-radius: 50%;
		}
		
		#box1 div {
			flex: 1;
			border-radius: 50%;
			border: 1px solid #ccc;
			color: red;
			text-align: center;
			font-size: 5px;
			;
		}
		
		#box div:nth-child(2) {
			background: yellow;
			color: yellow;
		}
		
		#box div:nth-child(3) {
			background: blue;
			color: blue;
		}
		
		#box div:nth-child(4) {
			background: white;
			color: #FFFFFF;
		}
	</style>

	<body>
		<div id="box">
			<div>red</div>
			<div>yellow</div>
			<div>blue</div>
			<div>white</div>
		</div>
		<div id="box1">
			<div>2</div>
			<div>8</div>
			<div>14</div>
			<div>20</div>
		</div>
		<canvas id="mycanvas" width="640" height="320"></canvas>
	<script type="text/javascript">
		var mycan = document.getElementById("mycanvas");
		var can = mycan.getContext("2d");
		//		can.rect(100,100,200,200);//绘制矩形
		//		can.arc(300,100,100,0,2*Math.PI);//绘制圆形arc)(圆心X坐标、圆心Y坐标、半径、起始角度、结束角度)
		//event对象,使用方式为在事件函数参数内调用，
		var c = "";
		var l = "";
		function move(obj) {
			can.beginPath(); //开始绘制图像
			can.lineWidth = obj.lineWidth || "2"; //线条宽度
			can.strokeStyle = obj.color || "#000"; //线条颜色
			mycan.onmousedown = function(e) {
				var e = e || window.event; //兼容写法
				var posX = e.offsetX;
				var posY = e.offsetY;
				//	console.log("X坐标："+posX+"Y坐标"+posY);//鼠标按下时的坐标
				can.moveTo(posX, posY); //绘制的起点
				mycan.onmousemove = function(e) {
					var e = e || window.event;
					var posx = e.offsetX;
					var posy = e.offsetY;
					can.lineTo(posx, posy); //绘制到这个点
					can.stroke(); //关闭路径,结束绘制
				}
			}
			mycan.onmouseup = function() {
				mycan.onmousemove = "";
				c = obj.color;
				l=obj.lineWidth;
			}
		}
		move({
			"color": "#ADFF2F",
			"lineWidth": 10
		});
		var oDiv = box.getElementsByTagName("div");
		for(var i = 0; i < oDiv.length; i++) {
			oDiv[i].onclick = function() {
				move({
					"color": this.innerHTML, 
					"lineWidth": l
				});
			}
		}
		var oDiv1 = box1.getElementsByTagName("div");
		for(var i = 0; i < oDiv1.length; i++) {
			oDiv1[i].onclick = function() {
				move({
					"color": c ,
					"lineWidth": this.innerHTML
				});
			}
		}
	</script>
	</body>
	

</html>