js怎么实现通过移动鼠标绘制两个点的连接线

study_webing 2017-06-22 11:44:55

用canvas还是svg呢
就是想实现那种类似拓扑图的线条连接
但是我不需要什么复杂的只需要通过点击不同的两个位置自动生成一条直线或者点击移动然后生成一条直线就类似js的onmousedown onmousemove onmouseup这样生成的线条希望能有个demo做参考
如图

希望各位朋友帮帮忙先行谢过了

...全文

1126 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

喀山以北 2019-11-13

打赏
举报

有帮助，谢谢

天际的海浪 2017-06-23

打赏
举报


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
</head>
<body>
<canvas id="canvasId" width="400" height="400" style="background-color: #eee;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
var flag = false;
var tc = document.createElement("canvas");
tc.width = canvas.width;
tc.height = canvas.height;
var tctx = tc.getContext("2d");
var x = 0;
var y = 0;
canvas.onmousedown = function (e) {
	e = e || window.event;
	x = e.clientX - canvas.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft);
	y = e.clientY - canvas.offsetTop  + (document.body.scrollTop || document.documentElement.scrollTop);
	flag = true;
	tctx.drawImage(canvas,0,0,canvas.width,canvas.height);
}
canvas.onmousemove = function (e) {
	if (!flag) return;
	e = e || window.event;
	var gx = e.clientX - canvas.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft);
	var gy = e.clientY - canvas.offsetTop  + (document.body.scrollTop || document.documentElement.scrollTop);
	ctx.clearRect(0,0,canvas.width,canvas.height);
	ctx.drawImage(tc,0,0,canvas.width,canvas.height);
	ctx.beginPath();
	ctx.moveTo(x,y);
	ctx.lineTo(gx,gy);
	ctx.stroke();
}
canvas.onmouseup = function (e) {
	flag = false;
}
</script>
</body>
</html>

study_webing 2017-06-23

打赏
举报

引用 1 楼 jslang 的回复:


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
</head>
<body>
<canvas id="canvasId" width="400" height="400" style="background-color: #eee;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
var flag = false;
var tc = document.createElement("canvas");
tc.width = canvas.width;
tc.height = canvas.height;
var tctx = tc.getContext("2d");
var x = 0;
var y = 0;
canvas.onmousedown = function (e) {
	e = e || window.event;
	x = e.clientX - canvas.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft);
	y = e.clientY - canvas.offsetTop  + (document.body.scrollTop || document.documentElement.scrollTop);
	flag = true;
	tctx.drawImage(canvas,0,0,canvas.width,canvas.height);
}
canvas.onmousemove = function (e) {
	if (!flag) return;
	e = e || window.event;
	var gx = e.clientX - canvas.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft);
	var gy = e.clientY - canvas.offsetTop  + (document.body.scrollTop || document.documentElement.scrollTop);
	ctx.clearRect(0,0,canvas.width,canvas.height);
	ctx.drawImage(tc,0,0,canvas.width,canvas.height);
	ctx.beginPath();
	ctx.moveTo(x,y);
	ctx.lineTo(gx,gy);
	ctx.stroke();
}
canvas.onmouseup = function (e) {
	flag = false;
}
</script>
</body>
</html>

感谢感谢

香蕉猪 2017-06-23

打赏
举报

引用 1 楼 jslang 的回复:


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
</head>
<body>
<canvas id="canvasId" width="400" height="400" style="background-color: #eee;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
var flag = false;
var tc = document.createElement("canvas");
tc.width = canvas.width;
tc.height = canvas.height;
var tctx = tc.getContext("2d");
var x = 0;
var y = 0;
canvas.onmousedown = function (e) {
	e = e || window.event;
	x = e.clientX - canvas.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft);
	y = e.clientY - canvas.offsetTop  + (document.body.scrollTop || document.documentElement.scrollTop);
	flag = true;
	tctx.drawImage(canvas,0,0,canvas.width,canvas.height);
}
canvas.onmousemove = function (e) {
	if (!flag) return;
	e = e || window.event;
	var gx = e.clientX - canvas.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft);
	var gy = e.clientY - canvas.offsetTop  + (document.body.scrollTop || document.documentElement.scrollTop);
	ctx.clearRect(0,0,canvas.width,canvas.height);
	ctx.drawImage(tc,0,0,canvas.width,canvas.height);
	ctx.beginPath();
	ctx.moveTo(x,y);
	ctx.lineTo(gx,gy);
	ctx.stroke();
}
canvas.onmouseup = function (e) {
	flag = false;
}
</script>
</body>
</html>

mark