如何使用HTML5 Canvas动态的绘制拓扑图
发布网友
发布时间：2022-04-22 14:39
共1个回答
热心网友
时间：2022-04-06 07:13
<!DOCTYPE html><html><head>
<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==-10000&&y1==-10000){
//还未进行选择开始位置的坐标
x1 = x;
y1 = y;
}else if (x2==-10000&&y2==-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></head><body id="body">
<div id="myCan">
<p>Image 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"/>
<p>Canvas:</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>
