vps opt miniCAD

usr/wiki/html5.css

@@ -1,6 +1,18 @@
 canvas {
 	border: solid 1px green;
 }
+.debug_info {
+	border: solid 1px gray;
+  margin: 10px 0;
+  padding: 0 10px;
+  max-height:100px;
+  width:380px;
+  overflow:auto;
+}
+.debug_info p{
+  margin:0;
+  padding:0;
+}
 .demo {
 	float:left;
 	margin-right:10px;

usr/wiki/html5.js

@@ -76,7 +76,12 @@ demo3.onclick = draw3;
 draw3()
 //}}}
 
+var draw_history = [{shape:"clear"}];
+var his = document.getElementById("draw_history");
+var draw = document.getElementById("draw").getContext("2d");
+
 var current_ctx = {//{{{
+	agent: {},
 	big_scale: 1.25,
 	small_scale: 0.8,
 	font: '32px sans-serif',
@@ -106,11 +111,11 @@ var current_ctx = {//{{{
 			{text: "紫色", value: "purple"},
 			{text: "白色", value: "white"},
 		]},
-		scale: {label: "比例", value: 1, width: 40},
+		scale: {text: "比例", value: 1},
-		point: {label: "坐标", value: "0,0", width: 60},
+		point: {text: "坐标", value: "0,0"},
-		begin: {label: "隐藏", value: 0, width: 40},
+		begin: {text: "隐藏", value: 0},
-		interval: {label: "间隔", value: 100, width: 20},
+		interval: {text: "间隔", value: 100},
-		json: {label: "数据", value: "", width: 80},
+		json: {text: "数据", value: ""},
 	},
 	command: {
 		cmd_shape: {
@@ -142,86 +147,105 @@ var current_ctx = {//{{{
 			blue: {text: "蓝色", key: "", conf:{"color": "blue"}},
 			white: {text: "白色", key: "", conf:{"color": "white"}},
 		},
-		control: {
+		ctrl_status: {
+			shape: {type: "config"},
+			stroke: {type: "config"},
+			color: {type: "config"},
+			scale: {type: "cache"},
+			begin: {type: "cache"},
+			point: {type: "cache"},
+		},
+		ctrl_show: {
 			big: {text: "放大", key: "b"},
 			small: {text: "缩小", key: "m"},
 			hide: {text: "隐藏"},
-			draw: {text: "恢复"},
+			show: {text: "恢复"},
 			play: {text: "播放", key: "a"},
+			interval: {type: "config", width: 30},
+		},
+		ctrl_data: {
 			delete: {text: "删除", key: "d"},
 			clear: {text: "清空", key: "q"},
 			export: {text: "导出"},
 			import: {text: "导入"},
+			json: {type: "config", width: 80},
 		}
 	},
-
-	list: {
-		style: ["red", "green", "yellow", "blue"],
-		stroke: ["fill", "stroke"],
-		shape: ["heart", "cycle", "rect", "line"],
-	}
 }
 //}}}
 function init(configs, commands) {//{{{
-	for (var k in configs) {
+	current_ctx.agent.isChrome = window.navigator.userAgent.indexOf("Chrome")>-1;
-		var config = configs[k];
+	current_ctx.agent.isMobile = window.navigator.userAgent.indexOf("Mobile")>-1;
-		var cs = document.getElementsByClassName("config "+k);
-
-		for (var i = 0; i < cs.length; i++) {
-			if (config.list) {
-				cs[i].innerHTML = "";
-				for (var j in config.list) {
-					var item = config.list[j];
-					var option = cs[i].appendChild(document.createElement("option"));
-					option.value = item.value
-					option.text = item.text
-					if (config.value == item.value) {
-						cs[i].selectedIndex = j
-					}
-				}
-				(function() {
-					var key = k;
-					cs[i].onchange = function(event) {
-						conf('config', key, event);
-					}
-				})();
-			} else {
-				cs[i].value = config.value;
-				(function() {
-					var key = k;
-					if (config.label) {
-						var label = cs[i].parentElement.insertBefore(document.createElement("label"), cs[i]);
-						label.appendChild(document.createTextNode(config.label+": "));
-					}
-					if (config.width) {
-						cs[i].style.width = config.width+"px";
-					}
-					cs[i].onkeyup = cs[i].onblur = function(event) {
-						conf('config', key, event);
-					}
-					conf('config', key, config.value);
-				})();
-			}
-		}
-	}
 
 	for (var group in commands) {
-		for (var which in commands[group]) {
+		var cs = document.getElementsByClassName(group+" bar");
-			var command = commands[group][which];
+		for (var i = 0; i < cs.length; i++) {
-			var cs = document.getElementsByClassName(group+" "+which);
+			for (var which in commands[group]) {
-			for (var i = 0; i < cs.length; i++) {
+				var command = commands[group][which];
-				if (command.key) {
+
-					cs[i].innerText = command.text+"("+command.key+")";
+				var config = configs[which];
-				} else {
+				if (command.type == "cache") {
-					cs[i].innerText = command.text
+					var label = cs[i].appendChild(document.createElement("label"));
-				}
+					label.innerText = config.text+": ";
-				(function() {
+
-					var key = which;
+					var label = cs[i].appendChild(document.createElement("label"));
-					var key1 = group;
+					label.innerText = config.value;
-					cs[i].onclick = function(event) {
+					label.className = "config "+which;
-						action(event, key, key1);
+				} else if (command.type == "config") {
+					if (config.list) {
+						var select = cs[i].appendChild(document.createElement("select"));
+						select.className = "config "+which;
+
+						for (var j in config.list) {
+							var item = config.list[j];
+							var option = select.appendChild(document.createElement("option"));
+							option.value = item.value;
+							option.text = item.text;
+							if (config.value == item.value) {
+								select.selectedIndex = j
+							}
+						}
+
+						(function() {
+							var key = which;
+							select.onchange = function(event) {
+								conf('config', key, event);
+							}
+						})();
+					} else {
+						var label = cs[i].appendChild(document.createElement("label"));
+						label.innerText = config.text+": ";
+
+						var input = cs[i].appendChild(document.createElement("input"));
+						input.style.width = command.width+"px";
+						input.value = config.value;
+						input.className = "config "+which;
+
+						(function() {
+							var key = which;
+							input.onkeyup = input.onblur = function(event) {
+								conf('config', key, event);
+							}
+						})();
 					}
-				})();
+				} else {
+					var cmd = cs[i].appendChild(document.createElement("button"));
+					cmd.className = group+" "+which;
+
+					if (command.key) {
+						cmd.innerText = command.text+"("+command.key+")";
+					} else {
+						cmd.innerText = command.text
+					}
+
+					(function() {
+						var key = which;
+						var key1 = group;
+						cmd.onclick = function(event) {
+							action(event, key, key1);
+						}
+					})();
+				}
 			}
 		}
 	}
@@ -244,18 +268,9 @@ function conf(group, which, value) {//{{{
 				}
 				break
 			case "blur":
-				if (current_ctx[group][which].value == event.target.value) {
+				current_ctx[group][which].value = event.target.value;
-					break
-				}
-				if (confirm("save value?")) {
-					current_ctx[group][which].value = event.target.value;
-				} else {
-					event.target.value = current_ctx[group][which].value;
-				}
 				break
 		}
-		console.log("conf");
-		console.log(event);
 		return
 	}
 
@@ -273,6 +288,28 @@ function conf(group, which, value) {//{{{
 	}
 	return config.value
 }//}}}
+function info() {//{{{
+	var list = []
+	for (var i = 0; i < arguments.length; i++) {
+		if (typeof arguments[i] == "object") {
+			list.push("{")
+			for (var k in arguments[i]) {
+				list.push(k+": "+arguments[i][k]+",")
+			}
+			list.push("}")
+		} else {
+			list.push(arguments[i])
+		}
+	}
+
+	debug_info = document.getElementsByClassName("debug_info");
+	for (var i = 0; i < debug_info.length; i++) {
+		var p = debug_info[i].appendChild(document.createElement("p"));
+		p.appendChild(document.createTextNode(list.join(" ")));
+		debug_info[i].scrollTop+=100;
+	}
+}
+//}}}
 init(current_ctx.config, current_ctx.command);
 
 var control_map = {//{{{
@@ -292,66 +329,58 @@ var control_map = {//{{{
 	a: "play",
 
 	Escape: "escape",
-}
+
-//}}}
+	action: {
-function control(event) {//{{{
+		"escape": [function() {
-	if (event.type == "keyup") {
-		action(event, control_map[event.key]);
-	}
-}
-//}}}
-function action(event, which, group) {//{{{
-	console.log(event);
-	switch (which) {
-		case "big":
-			conf("config", "scale", (conf("config", "scale")*current_ctx.big_scale).toFixed(3));
-			draw.scale(current_ctx.big_scale, current_ctx.big_scale);
-			refresh();
-			break
-		case "small":
-			conf("config", "scale", (conf("config", "scale")*current_ctx.small_scale).toFixed(3));
-			draw.scale(current_ctx.small_scale, current_ctx.small_scale);
-			refresh();
-			break
-		case "escape":
 			current_ctx.begin_point = null;
 			current_ctx.end_point = null;
-			refresh();
+		}],
-			break
+		"big": [function(){
-		case "clear":
+			conf("config", "scale", (conf("config", "scale")*current_ctx.big_scale).toFixed(3));
-			if (confirm("clear all?")) {
+			draw.scale(current_ctx.big_scale, current_ctx.big_scale);
-				his.innerHTML = "";
+		}],
-				draw_history = [];
+		"small": [function(){
-				refresh();
+			conf("config", "scale", (conf("config", "scale")*current_ctx.small_scale).toFixed(3));
-			}
+			draw.scale(current_ctx.small_scale, current_ctx.small_scale);
-			break
+		}],
-		case "hide":
+		"hide": [function() {
 			conf("config", "begin", draw_history.length);
-			refresh();
+		}],
-			break
+		"show": [function() {
-		case "delete":
-			draw_history.pop();
-			refresh();
-			break
-		case "draw":
 			conf("config", "begin", 0);
-			refresh();
+		}],
-			break
+		"play": [function() {
-		case "play":
 			conf("config", "begin", 0);
 			refresh(conf("config", "interval"), 0);
-			break
+			return false
-		case "export":
+		}],
-			conf("config", "json", JSON.stringify(draw_history));
+		"delete": [function() {
-			break
+			if (draw_history.length > 1) {
-		case "import":
+				draw_history.pop();
-			draw_history = JSON.parse(conf("config", "json"));
+				var tr = his.rows[his.rows.length-1];
-			refresh();
+				tr.parentElement.removeChild(tr)
-			break
-		default:
-			if (!which || !group) {
-				break
 			}
+		}],
+		"clear": [function() {
+			if (confirm("clear all?")) {
+				draw_history.length = 1;
+				var th = his.rows[0];
+				his.innerHTML = "";
+				his.appendChild(th);
+			}
+		}],
+		"export": [function() {
+			conf("config", "json", JSON.stringify(draw_history));
+			return false
+		}],
+		"import": [function() {
+			draw_history = JSON.parse(conf("config", "json"));
+		}],
+		"default": [function(event, which, group) {
+			if (!which || !group) {
+				return false
+			}
+
 			var cs = document.getElementsByClassName(group);
 			for (var i = 0; i < cs.length; i++) {
 				cs[i].style.backgroundColor = "white";
@@ -363,12 +392,36 @@ function action(event, which, group) {//{{{
 			}
 
 			var command = current_ctx.command[group][which];
+			if (!command) {
+				return false
+			}
 			for (var k in command.conf) {
 				conf("config", k, command.conf[k]);
 			}
 			for (var k in command.cmd) {
 				action(event, k, command.cmd[k])
 			}
+		}],
+	}
+}
+//}}}
+function control(event) {//{{{
+	if (event.type == "keyup") {
+		action(event, control_map[event.key]);
+	}
+}
+//}}}
+function action(event, which, group) {//{{{
+	var w = control_map.action[which]? which: "default";
+	while (control_map.action[w]) {
+		for (var i in control_map.action[w]) {
+			var next = control_map.action[w][i](event, which, group);
+			w = next || w;
+		}
+		w = next;
+		if (next == undefined) {
+			refresh()
+		}
 	}
 }
 //}}}
@@ -381,44 +434,62 @@ function trans(point) {//{{{
 	return point;
 }
 //}}}
-function show_debug(log, clear) {//{{{
-	var fuck = document.getElementById("fuck");
-	// if (clear) {
-	// 	fuck.innerHTML = "";
-	// }
-	var div = fuck.appendChild(document.createElement("div"));
-	div.appendChild(document.createTextNode(log));
-}
-//}}}
 function draw_point(event) {//{{{
-	console.log("point");
+	var point = trans({
-	console.log(event);
+		x: event.type == "touchstart"? event.touches[0].clientX: event.offsetX,
-	var point = trans({x:event.offsetX, y:event.offsetY});
+		y: event.type == "touchstart"? event.touches[0].clientY: event.offsetY,
-	if (event.type == "touchstart") {
+	});
-		var point = trans({x:event.touches[0].clientX, y:event.touches[0].clientY});
-	}
-
-	if (current_ctx.index_point) {
-		draw.beginPath();
-		draw.arc(point.x, point.y, 5, 0, 2*Math.PI);
-		draw.fill();
-	}
 
 	if (!current_ctx.begin_point) {
 		current_ctx.begin_point = point;
+		info(event.type, "begin_point", current_ctx.begin_point)
 		return
 	}
 	current_ctx.end_point = point;
-	console.log(current_ctx.end_point);
+	info(event.type, "end_point", current_ctx.end_point)
-	var text = "";
+
-	if (conf("config", "shape") == "text") {
+	var s = {
-		text = prompt("请入文字", "");
+		color:conf("config", "color"),
+		stroke:conf("config", "stroke"),
+		shape:conf("config", "shape"),
+		begin_point:current_ctx.begin_point,
+		end_point:current_ctx.end_point,
+		text:conf("config", "shape") == "text"? prompt("请入文字", ""): "",
+	};
+
+	draws(draw, s);
+	add_history(his, s);
+	current_ctx.begin_point = null;
+	current_ctx.end_point = null;
+}
+//}}}
+function draw_move(event) {//{{{
+	if (current_ctx.agent.isMobile) {
+		return
 	}
 
-	draws(draw, conf("config", "color"), conf("config", "stroke"), conf("config", "shape"), current_ctx.begin_point, current_ctx.end_point, text);
+	if (current_ctx.begin_point) {
-	draw_history.push({style:conf("config", "color"), stroke:conf("config", "stroke"), shape:conf("config", "shape"), begin_point:current_ctx.begin_point, end_point:current_ctx.end_point, text:text})
+		var point = trans({x:event.offsetX, y:event.offsetY});
+		conf("config", "point", parseInt(point.x)+","+parseInt(point.y));
+		info(event.type, "move_point", point)
 
-	var headers = ["style", "stroke", "shape", "x1", "y1", "x2", "y2", "text"]
+		refresh();
+		draws(draw, {
+			color:conf("config", "color"),
+			stroke:conf("config", "stroke"),
+			shape:conf("config", "shape"),
+			begin_point:current_ctx.begin_point,
+			end_point:point,
+			text:"",
+		});
+	}
+}
+//}}}
+
+function add_history(his, s) {//{{{
+	draw_history.push(s);
+
+	var headers = ["color", "stroke", "shape", "x1", "y1", "x2", "y2", "text"]
 	if (his.rows.length == 0) {
 		var tr = his.insertRow(-1);
 		for (var i in headers) {
@@ -428,206 +499,131 @@ function draw_point(event) {//{{{
 	}
 
 	var tr = his.insertRow(-1);
-	var fields = [conf("config", "color"), conf("config", "stroke"), conf("config", "shape"),
+	var fields = [s.color, s.stroke, s.shape,
-		parseInt(current_ctx.begin_point.x), parseInt(current_ctx.begin_point.y),
+		parseInt(s.begin_point.x), parseInt(s.begin_point.y),
-		parseInt(current_ctx.end_point.x), parseInt(current_ctx.end_point.y), text]
+		parseInt(s.end_point.x), parseInt(s.end_point.y), s.text]
 
 	for (var i in fields) {
 		var td = tr.appendChild(document.createElement("td"));
 		switch (headers[i]) {
-			case "shape":
+			case "color":
-			case "style":
 			case "stroke":
+			case "shape":
 				var select = td.appendChild(document.createElement("select"));
-				(function() {
+				var list = current_ctx.config[headers[i]].list;
-					var index = [headers[i]];
+				for (var j in list) {
-					select.onchange = function(event) {
-						draw_history[tr.rowIndex-1][index] = event.target[event.target.selectedIndex].text;
-						refresh();
-					}
-				})();
-				var shapes = current_ctx.list[headers[i]];
-				for (var j in shapes) {
 					var option = select.appendChild(document.createElement("option"));
-					option.text = shapes[j];
+					option.value = list[j].value;
-					if (option.text == fields[i]) {
+					option.text = list[j].text;
+					if (option.value == fields[i]) {
 						select.selectedIndex = j;
 					}
 				}
+
+				(function() {
+					var index = headers[i];
+					select.onchange = function(event) {
+						draw_history[tr.rowIndex][index] = event.target[event.target.selectedIndex].value;
+						refresh();
+					}
+				})();
 				break
 			default:
 				var input = td.appendChild(document.createElement("input"));
 				input.value = fields[i];
 				input.style.width="40px";
-				input.dataset.row = tr.rowIndex-1
+
-				input.dataset.col = headers[i]
+				(function() {
-				input.onkeyup = modify
+					var row = draw_history[tr.rowIndex]
+					var col = headers[i]
+					input.onblur = input.onkeyup = function(event) {
+						if (event.key && event.key != "Enter") {
+							return
+						}
+						var value = event.target.value;
+						switch (col) {
+							case "x1":
+								row.begin_point.x = value;
+								break
+							case "y1":
+								row.begin_point.y = value;
+								break
+							case "x2":
+								row.end_point.x = value;
+								break
+							case "y2":
+								row.end_point.y = value;
+								break
+							default:
+								row[data.col] = value;
+						}
+						refresh()
+					}
+				})()
 		}
-
 	}
-
-	current_ctx.begin_point = null;
-	current_ctx.end_point = null;
-}
-//}}}
-function draw_move(event) {//{{{
-	var point = trans({x:event.offsetX, y:event.offsetY});
-	conf("config", "point", parseInt(point.x)+","+parseInt(point.y));
-
-	if (current_ctx.begin_point) {
-		refresh();
-		draws(draw, conf("config", "color"), conf("config", "stroke"), conf("config", "shape"), current_ctx.begin_point, point, "");
-	}
-}
-//}}}
-
-var draw_history = [];
-var his = document.getElementById("draw_history");
-function modify(event, row, col) {//{{{
-	if (event.key != "Enter") {
-		return
-	}
-	console.log("modify");
-	console.log(event);
-	console.log();
-	var data = event.target.dataset;
-	var row = draw_history[data.row];
-	var value = event.target.value;
-	switch (data.col) {
-		case "x1":
-			row.begin_point.x = value;
-			break
-		case "y1":
-			row.begin_point.y = value;
-			break
-		case "x2":
-			row.end_point.x = value;
-			break
-		case "y2":
-			row.end_point.y = value;
-			break
-		default:
-			row[data.col] = value;
-	}
-
-	refresh();
 }
 //}}}
 function refresh(time, i) {//{{{
 	if (time) {
-		if (0 == i) {
+		if (i < draw_history.length) {
-			draw.clearRect(0, 0,400/conf("config", "scale"), 400/conf("config", "scale"));
+			draws(draw, draw_history[i++]);
-		}
+			setTimeout(function(){refresh(time, i)}, time);
-
-		if (conf("config", "begin") <= i && i < draw_history.length) {
-			var h = draw_history[i];
-			draws(draw, h.style, h.stroke, h.shape, h.begin_point, h.end_point);
-			i++;
-			setTimeout(function(){
-				refresh(time, i);
-			}, time);
 		}
 		return
 	}
 
-	draw.clearRect(0, 0,400/conf("config", "scale"), 400/conf("config", "scale"));
+	for (var i = conf("config", "begin"); i < draw_history.length; i++) {
-
+		draws(draw, draw_history[i]);
-	for (var i in draw_history) {
-		if (i < conf("config", "begin")) {
-			continue
-		}
-		var h = draw_history[i];
-		draws(draw, h.style, h.stroke, h.shape, h.begin_point, h.end_point, h.text);
 	}
 }
 //}}}
-
+function draws(draw, h) {//{{{
-var item = document.getElementById("draw");
-var draw = item.getContext("2d");
-function draws(draw, style, stroke, shape, begin_point, end_point, text) {//{{{
 	draw.save();
-	begin_x = begin_point.x;
+	if (h.shape == "clear") {
-	begin_y = begin_point.y;
+		draw.clearRect(0, 0,400/conf("config", "scale"), 400/conf("config", "scale"));
-	end_x = end_point.x;
+		draw.restore();
-	end_y = end_point.y;
+		return
-
-	if (current_ctx.index_point) {
-	draw.beginPath();
-	draw.arc(begin_x, begin_y, 5, 0, 2*Math.PI)
-	draw.fill()
 	}
 
-	if (current_ctx.index_point) {
+	var begin_x = h.begin_point.x;
-	draw.beginPath();
+	var begin_y = h.begin_point.y;
-	draw.arc(end_x, end_y, 5, 0, 2*Math.PI)
+	var end_x = h.end_point.x;
-	draw.fill()
+	var end_y = h.end_point.y;
+
+	if (h.color) {
+		if (h.stroke == "stroke") {
+			draw.strokeStyle = h.color;
+		} else {
+			draw.fillStyle = h.color;
+		}
 	}
 
-	switch (shape) {
+	info("draw", h)
+	switch (h.shape) {
 		case 'heart':
 			r = Math.sqrt(Math.pow(begin_x-end_x, 2)+Math.pow(begin_y-end_y,2));
 			a = Math.atan((end_y-begin_y)/(end_x-begin_x))/Math.PI*180;
-			drawHeart(draw, begin_x, begin_y, r, a, style, stroke)
+			drawHeart(draw, begin_x, begin_y, r, a, h.color, h.stroke)
 			break
 		case 'cycle':
 			draw.beginPath();
 			r = Math.sqrt(Math.pow(begin_x-end_x, 2)+Math.pow(begin_y-end_y,2));
 			draw.arc(begin_x, begin_y, r, 0, 2*Math.PI)
-			if (stroke == "stroke") {
+			draw[h.stroke]()
-				if (style) {
-					draw.strokeStyle = style;
-				}
-				draw.stroke()
-			} else {
-				if (style) {
-					draw.fillStyle = style;
-				}
-				draw.fill()
-			}
 			break
 		case 'line':
 			draw.beginPath();
 			draw.moveTo(begin_x, begin_y);
 			draw.lineTo(end_x, end_y);
-			if (stroke == "stroke") {
+			draw[h.stroke]()
-				if (style) {
-					draw.strokeStyle = style;
-				}
-				draw.stroke()
-			} else {
-				if (style) {
-					draw.fillStyle = style;
-				}
-				draw.fill()
-			}
 			break
 		case 'rect':
-			if (stroke == "stroke") {
+			draw[h.stroke+"Rect"](begin_x, begin_y, end_x-begin_x, end_y-begin_y);
-				if (style) {
-					draw.strokeStyle = style;
-				}
-				draw.strokeRect(begin_x, begin_y, end_x-begin_x, end_y-begin_y);
-			} else {
-				if (style) {
-					draw.fillStyle = style;
-				}
-				draw.fillRect(begin_x, begin_y, end_x-begin_x, end_y-begin_y);
-			}
 			break
 		case 'text':
-			if (stroke == "stroke") {
+			draw.font = current_ctx.font;
-				if (style) {
+			draw[h.stroke+"Text"](h.text, begin_x, begin_y, end_x-begin_x);
-					draw.strokeStyle = style;
-				}
-				draw.font = current_ctx.font;
-				draw.strokeText(text, begin_x, begin_y, end_x-begin_x);
-			} else {
-				if (style) {
-					draw.fillStyle = style;
-				}
-				draw.font = current_ctx.font;
-				draw.fillText(text, begin_x, begin_y, end_x-begin_x);
-			}
 	}
 
 	draw.restore();

usr/wiki/html5.md

@@ -6,49 +6,17 @@
 - 文档: <https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/>
 
 ### miniCAD在线绘图
-<button class="cmd_shape heart"></button>
+<div class="cmd_shape bar"></div>
-<button class="cmd_shape cycle"></button>
+<div class="cmd_stroke bar"></div>
-<button class="cmd_shape rect"></button>
+<div class="cmd_color bar"></div>
-<button class="cmd_shape line"></button>
+<div class="ctrl_show bar"></div>
-<button class="cmd_shape text"></button>
-<br/>
-<button class="cmd_stroke stroke"></button>
-<button class="cmd_stroke fill"></button>
-<br/>
-<button class="cmd_color black"></button>
-<button class="cmd_color red"></button>
-<button class="cmd_color yellow"></button>
-<button class="cmd_color green"></button>
-<button class="cmd_color purple"></button>
-<button class="cmd_color blue"></button>
-<button class="cmd_color white"></button>
-<br/>
 <canvas id="draw" width="400" height="400"
 onmousemove="draw_move(event)"
 onmouseup="draw_point(event)"
 ></canvas>
-<br/>
+<div class="ctrl_status bar"></div>
-<select class="config shape"></select>
+<div class="debug_info"></div>
-<select class="config stroke"></select>
+<div class="ctrl_data bar"></div>
-<select class="config color"></select>
-<label class="config scale"></label>
-<label class="config begin"></label>
-<label class="config point"></label>
-<br/>
-<button class="control big"></button>
-<button class="control small"></button>
-<button class="control hide"></button>
-<button class="control draw"></button>
-<button class="control play"></button>
-<input class="config interval"></label>
-<br/>
-<button class="control delete"></button>
-<button class="control clear"></button>
-<button class="control export"></button>
-<button class="control import"></button>
-<input class="config json"></label>
-<br/>
-<div id="fuck"></div>
 <table id="draw_history"></table>
 
 ### canvas绘图