console 命令行工具 X clear

console

window.onload = function() {
				//获取相应的元素
				var svgNS = 'http://www.w3.org/2000/svg'; //命名空间
				var oParent = document.getElementById('div1');
				var oSvg = document.getElementById('svg1');
				var oPolyLine = null; 
				var pointsNum = ''; 

				function createTag(tag, objAttr) {
					var oTag = document.createElementNS(svgNS, tag);
					for (var attr in objAttr) {
						oTag.setAttribute(attr, objAttr[attr]);
					}
					return oTag;
				}
			
				oSvg.onmousedown = function(ev) {
					var ev = ev || window.event; 
					if (!oPolyLine) { 
						
						    oPolyLine = createTag('polyline', {
							'fill': 'none',
							'stroke': 'red',
							'stroke-width': '2'
						});
					
						oSvg.appendChild(oPolyLine);
					}
					var x = ev.clientX - oParent.offsetLeft; 
					var y = ev.clientY - oParent.offsetTop;
					if (pointsNum == '') { 
						pointsNum = x + ',' + y;
					} else { 
						pointsNum += ',' + x + ',' + y;
					}
					oPolyLine.setAttribute('points', pointsNum);
					var oCircle = createTag('circle', {
						'cx': x,
						'cy': y,
						'r': '5',
						'fill': 'white',
						'stroke': 'red',
						'stroke-width': '3'
					});
					oSvg.appendChild(oCircle);
				}

				oSvg.onmousemove = function(ev) {
					var ev = ev || window.event;
					if (oPolyLine) {
						var x = ev.clientX - oParent.offsetLeft;
						var y = ev.clientY - oParent.offsetTop;
						oPolyLine.setAttribute('points', pointsNum + ',' + x + ',' + y);
					}
				};

				//停止
				oSvg.oncontextmenu = function() {
					oSvg.onmousemove = null;
					return false;
				}

			};

<!DOCTYPE HTML>
<html>
	<head>
			

	</head>

	<body>
		<div id="div1">
			<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
			</svg>
		</div>
	</body>
</html>

#div1 {
				width: 400px;
				height: 400px;
				background: white;
			}

			body {
				background:lightcyan;
			}