软件开发网站开发公司,中国网络推广网站排名,电子贺卡制作模板,个人网站备案费用偶获得一批数据#xff0c;本着好玩的态度绘制下来看看到底是什么鬼#xff0c;绘制的结果如下#xff1a; 呵呵#xff0c;什么都不像。而且中间最重要的部分因数据量过大绘制的已经看不清楚了。于是乎#xff0c;缩小绘制范围#xff0c;去除周围没有用的数据。重新绘制…偶获得一批数据本着好玩的态度绘制下来看看到底是什么鬼绘制的结果如下 呵呵什么都不像。而且中间最重要的部分因数据量过大绘制的已经看不清楚了。于是乎缩小绘制范围去除周围没有用的数据。重新绘制结果如下 呵呵北京市地图。有点像大家可以唱五环之歌了。。。 再来一张只有边没有点的会清晰一点。 嗯。。。不错。。。 绘制代码如下 var xhrNode new XMLHttpRequest();
xhrNode.onreadystatechange function() {if(xhrNode.readyState 4) {if((xhrNode.status 200 xhrNode.status 300) || xhrNode.status 304) {drawNode(xhrNode.responseText);}else {alert(hehe);}}
}
xhrNode.open(get,ReadFile.php,false);
xhrNode.send(null);function drawNode(paths) {var pathArr paths.split(,), i,len,perpath,cs document.getElementById(cs);var context cs.getContext(2d);context.beginPath();for(i 0,len pathArr.length;i len;i) {perpath pathArr[i].trim().split( );context.moveTo(parseInt(perpath[1]),parseInt(perpath[2]));if(parseInt(perpath[0]) 0) {context.arc(parseInt(perpath[1]),parseInt(perpath[2]),7,0,2*Math.PI,false);context.fill();context.fillText(parseInt(perpath[0]),parseInt(perpath[1]) 8,parseInt(perpath[2]) 8);}else {context.arc(parseInt(perpath[1]),parseInt(perpath[2]),1,0,2*Math.PI,false);if(parseInt(perpath[3]) ! -1) {context.fillText(parseInt(perpath[0]),parseInt(perpath[1]) - 4,parseInt(perpath[2]) 4);context.fillText(parseInt(perpath[3]),parseInt(perpath[4]) - 4,parseInt(perpath[5]) 4);context.arc(parseInt(perpath[4]),parseInt(perpath[5]),1,0,2*Math.PI,false);}}}context.stroke();
} canvas确实很有意思但是对于浏览器来说数据量一大就会出问题了卡的不行。所以当数据达到几十万甚至上百万千万的时候还是用“万能“的c语言绘制比较好。。。 以上转载于:https://www.cnblogs.com/MarcoHan/p/5475926.html
