javascript 动态生成svg 折线图像

首先通过一个简单的方法了解一下javascript动态创建svg折线的方法

 function init2(){																		var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); //创建svg标签 
	svg.setAttribute("width", "800");   //设置宽度
	svg.setAttribute("height", "500");  //设置高度
	document.body.appendChild(svg);  //将标签加入到document

	var r = document.createElementNS("http://www.w3.org/2000/svg", "polyline");  //创建polyline对象，即折线对象，如果需要创建其他类型图像，<span style="white-space:pre">												</span>//修改 第二个参数
	 r.setAttribute("fill", "white"); 
	 r.setAttribute("points", "0,0 0,20 20,20 20,40 40,40 40,60");    //设置属性，表面的是折线经过的点的位置
	 r.setAttribute("stroke", "red");                                 //设置图像颜色
	 r.setAttribute("stroke-width", "2");                             //设置线宽
	svg.appendChild(r);                  //添加到svg标签中
 }

接下来，通过对页面添加鼠标事件或者触摸事件，达到画图的效果。

<script type="text/javascript">	 
objdiv = new Array();
var strdiv;
var i = 0;
var lines = "";
var postline = "|";
var mousedown = false;
var mouseup = true;
var k = 0;
var infovalue = "";
var imageTag = false;
var svg = "";
 function starup() {
 //创建svg对象
	svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
	svg.setAttribute("width", "100%"); 
	svg.setAttribute("height", "100%");
 	document.body.appendChild(svg);
	 //添加事件 
	//document.addEventListener('touchmove', function(event) {event.preventDefault();}, false); 
	document.addEventListener('touchstart',handleMouseDown, false); 
	document.addEventListener('touchmove', handleMouseMove, false); 
	document.addEventListener('touchend', handleMouseUp, false); 

}

function handleMouseMove(e) {
	var ev = e || window.event;  //这个地方主要是为了兼容各个浏览器的事件参数
 	var xo = ev.clientX;    //获取x轴坐标
	var yo = ev.clientY;    //获取Y轴坐标
 //在获取X轴Y轴坐标时，android自带的浏览器核心需要用ev.touches[0].clientX，这种方式。具体原因我还没有学习到，接下来会转载一篇专门说这个的文章	
if (mousedown == true && mouseup == false) {
 		lines = lines + " " + xo + "," + yo;
		objdiv[i].setAttribute("points", lines); //设置折线经过的坐标属性属性
 	} else if (mousedown == true && mouseup == false && event.button == 0) {
 		mouseup = true;
		xo = 0.0;
		yo = 0.0;
 		lines = "";
	}
}
function handleMouseDown(e) {
	var ev = e || window.event;
	var xo = ev.clientX;
	var yo = ev.clientY;
	if (mouseup == true && mousedown == false) {
		i = k;	 
 //创建polyline
		objdiv[i] = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
		objdiv[i].setAttribute("fill", "white"); 
		objdiv[i].setAttribute("stroke", "black");
		objdiv[i].setAttribute("stroke-width", "2"); 
		svg.appendChild(objdiv[i]);
 		k = i + 1;
	}
	mousedown = true;
	mouseup = false;
	 
}
function handleMouseUp() {
	mousedown = false;
	mouseup = true;
	xo = 0.0;
	yo = 0.0;
	postline = postline + lines + "|";
	 
	lines = "";
}
</script>