如何动态实现拓扑图？
创新互联是一家集网站建设,淮南企业网站建设,淮南品牌网站建设,网站定制,淮南网站建设报价,网络营销,网络优化,淮南网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
------解决方案--------------------
应该是div+css来实现动态的 拓扑图
ajax是用来对无刷新的拓扑图进行支持的
------解决方案--------------------
找绘图控件吧。网上好像有网页画流程图的架构，不过架构很重，也不稳定，建议你找个轻型的jquery控件，自己略做改动，做简单实现
1、活版印刷
一个成功的网站只有很少的字体是类似的款式，而不是使用的字体。最好的网站应该使用无衬线和无衬线字体，而不是两者的结合。
印刷术的网站也应该小心使用的字体，好的设计会加入一些类似的字体，而不是一个范围内型面。大多数浏览器都能识别特定数量的安全字体，这样设计主要是利用以避免并发症的发生。
2、代码质量
当创建一个网站，它是很好的做法，以符合标准。这包括代码中的错误，代码为更好的布局，以及确保你的ID和类的正确识别。这通常是通过描述指定元件做什么。
不符合标准的网站无法使用或容易出错的，标准可以涉及到正确的页面布局的可读性，以及确保适当地关闭了编码元素。DOCTYPE声明，这是用来突出显示代码中的错误。系统识别错误和不符合网页设计标准。
3、视觉设计
良好的视觉设计网站上的标识，其目标市场。这可以是一个年龄组或特定的文化链，因此，设计人员应了解其受众的趋势。设计人员也应该明白他们设计的，这意味着一个企业网站不应该被设计成一个社交媒体网站，例如相同类型的网站。
4、交互设计
对于网站来说，好的交互设计对网页设计的整体起着至关重要的作用，一个好的交互不仅能大大提升页面整体的设计效果，增强页面的“活跃度”，还能有效提高用户体验，“屏蔽”单调的操作流程，使得产品、文化的表现都能最大化的呈现并传达到相关的受众。
5、内容更新
企业Web站点建立后，要不断更新网页内容。站点信息的不断更新，让浏览者了解企业的发展动态和网上职务等，同时也会帮助企业建立良好的形象。
参考资料来源：百度百科-网页设计
首先需要了解什么是HTML5，然后介绍HTML5相关的工具（包括IDE，框架，组件等），最后用这些工具开发一个应用，基本上论文就可以交差了。
至于开发框架，理解是各种不同功能的组件，一个web应用需要各种第三方组件，比如基础功能用到jQuery，界面样式用到Bootstrap，通用组件可以用到easyUI或者KendoUI，各种图表用到highcharts，拓扑图可以用mxGraph或者Qunee，通讯可以用Websocket，写CSS用less，模块化用requireJS或者SeaJS，移动平台组件可以用jquerymobile或者senchatouch，触摸交互扩展用hammer.js，如果要开发Hybrid应用，可以借助phonegap，此外开发工具可以用webstorm。
//需要自己引入jQuery
!DOCTYPE htmlhtmlhead
script type="text/javascript" src="jquery-3.0.0.js"/script
script type="text/javascript"
//是否可以进行直线标记
var flag = false;
//是否可以进行圆圈标记
var flag1 = false;
//是否可以进行文字标记
var flag2 = false;
//标记的开始坐标
var x1 = -10000;
var y1 = -10000;
//标记的结束坐标
var x2 = -10000;
var y2 = -10000;
//查找所有图片,动态创建画布
function newCanvas (){
//查找所有图片，并且生成画布
$("#body").find("img").each(function(i,e){
//获取图片长度宽度
var imgWidth = $(this).attr("width");
var imgHeight = $(this).attr("height");
//根据图片动态创建画布
var canvas = document.createElement("canvas");
canvas.width = imgWidth;
canvas.height = imgHeight;
canvas.id = "canvas"+i;
$(canvas).css("border", "1px solid #d3d3d3");
document.getElementById("myCan").appendChild(canvas);
//获取画布
var c=document.getElementById("canvas"+i);
var ctx=c.getContext("2d");
//给画布绘制图片
var imgId = $(this).attr("id");
var img=document.getElementById(imgId);
$(img).ready(function() {
ctx.drawImage(img,0,0,imgWidth,imgHeight);
});
});
}
//动态清空所有画布
function clearCanvas (){
//查找所有图片，并且清空画布
$("#body").find("img").each(function(i,e){
//获取图片长度宽度
var imgWidth = $(this).attr("width");
var imgHeight = $(this).attr("height");
//获取图片元素
var img = e;
//查找所有画布
$("#body").find("canvas").each(function(i,e){
//获取画布
var c= e;
var ctx=c.getContext("2d");
//绘制一个纯白色画布
ctx.clearRect(0,0,imgWidth,imgHeight);
//重新将原图片加入到画布中
ctx.drawImage(img,0,0,imgWidth,imgHeight);
});
});
}
//动态获取所有画布的Base64压缩数据
function copyCanvas (){
//查找所有画布
$("#body").find("canvas").each(function(i,e){
var canvas = e;
var dataURL = canvas.toDataURL();
var b64 = dataURL.substring( 22 );
console.log(b64);
console.log("**********************************************");
});
}
$(document).ready(function(){
//查找所有图片,动态创建画布
newCanvas();
//标记按钮
$("#mark").click(function(){
flag = true;
});
//圆圈按钮
$("#circle").click(function(){
flag1 = true;
});
//清空按钮
$("#clear").click(function(){
//动态清空所有画布
clearCanvas();
});
//字体按钮
$("#writeFont").click(function(){
flag2 = true;
});
//获取base64压缩数据
$("#getData").click(function(){
//动态获取所有画布的Base64压缩数据
copyCanvas ();
});
//给页面所有画布设置点击事件
$(document).find("canvas").each(function(i){
$(this).bind("click", mouseMove);
});
//画布绘制标记
function mouseMove(event){
var id = $(this).attr("id");
var c=document.getElementById(id);
var ctx=c.getContext("2d");
//如果激活了直线标记按钮
if(flag){
//获取点击位置的相对坐标
var coord = getXAndY(event,$(this));
var x = coord.x;
var y = coord.y;
if(x1==-10000y1==-10000){
//还未进行选择开始位置的坐标
x1 = x;
y1 = y;
}else if (x2==-10000y2==-10000){
//还未进行选择结束位置的坐标
x2 = x;
y2 = y;
//绘制标记
//必须开启beginPath，否则可能会出现之前绘制过的线条
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();
//必须释放closePath
ctx.closePath();
//初始化
flag = false;
x1 = -10000;
y1 = -10000;
x2 = -10000;
y2 = -10000;
}else{
alert("浏览器异常，请按F5刷新页面重新标记！");
}
}else{
//alert("请先点击标记按钮再进行标记！");
}
//如果激活了圆圈按钮
if(flag1){
//获取点击位置的相对坐标
var coord = getXAndY(event,$(this));
var x = coord.x;
var y = coord.y;
//绘制圆圈标记
ctx.beginPath();
ctx.arc(x,y,10,0,2*Math.PI);
ctx.stroke();
//初始化
flag1 = false ;
}
//如果激活了文字标记按钮
if(flag2){
//获取点击位置的相对坐标
var coord = getXAndY(event,$(this));
var x = coord.x;
var y = coord.y;
var user = window.prompt("请输入标记内容","");
//确定
if(user){
//绘制文字标记
ctx.font="16px Arial";
ctx.fillText(user,x,y);
}
//初始化
flag2 = false;
}
}
//获取鼠标点击画布区域中的相对位置坐标
function getXAndY(event,clickDom){
//鼠标点击的绝对位置
Ev= event || window.event;
var mousePos = mouseCoords(event);
var x = mousePos.x;
var y = mousePos.y;
//alert("鼠标点击的绝对位置坐标："+x+","+y);
//获取canvas画布在body中的绝对位置
var x1 = $(clickDom).offset().left;
var y1 = $(clickDom).offset().top;
//alert("画布在body中的绝对位置坐标："+x1+","+y1);
//鼠标点击位置的相对于canvas画布的坐标
var x2 = x - x1;
var y2 = y - y1;
//alert("画布在body中的相对位置坐标："+x2+","+y2);
return {x:x2,y:y2};
}
//获取鼠标点击画布区域中的绝对位置坐标
function mouseCoords(event){
if(event.pageX || event.pageY){
return {x:event.pageX, y:event.pageY};
}
return{
x:event.clientX + document.body.scrollLeft - document.body.clientLeft,
y:event.clientY + document.body.scrollTop - document.body.clientTop
};
}
});
/script/headbody id="body"
div id="myCan"
pImage to use:/p
img id="scream" src="test.jpg" alt="The Scream" width="200" height="200"/
img id="scream1" src="test.jpg" alt="The Scream" width="200" height="200"/
pCanvas:/p
/div
input id="mark" type="button" value="标记" /
input id="circle" type="button" value="圈记" /
input id="writeFont" type="button" value="文字" /
input id="clear" type="button" value="清空" /
input id="getData" type="button" value="图片生成Base64压缩数据" //body/html
