如何实现canvas连线

发布网友

我来回答

4个回答

热心网友

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.3.min.js"></script>
</head>

<body>
<canvas id="myCanvas" width="600" height="800" style="display:block;position:absolute;"></canvas>

<script>
//画图
arr = [{
x: 10,
y: 10,
width: 50,
height: 50,

}, {
x: 110,
y: 10,
width: 50,
height: 50,
}, {
x: 110,
y: 110,
width: 50,
height: 50,
}, {
x: 10,
y: 110,
width: 50,
height: 50,

}, {
x: 10,
y: 210,
width: 50,
height: 50,
}
, {
x: 110,
y: 210,
width: 50,
height: 50,
}
, {
x: 10,
y: 310,
width: 50,
height: 50,
}
, {
x: 110,
y: 310,
width: 50,
height: 50,

}
];
function line(i) {
list = [{
x: 35,
y: 35,
},{
x: 135,
y: 35,

},{
x: 135,
y: 135,

},{
x: 35,
y: 135,

},{
x: 35,
y: 235,
},{

x: 135,
y: 235,

},{
x: 35,
y: 335,
},{
x: 135,
y: 335,
}

];

if(i == 1) {
ctx.moveTo(list[0].x, list[0].y)
for(var j=0;j<i;j++){
ctx.lineTo(list[j+1].x, list[j+1].y)

};
ctx.stroke()
}
if(i == 2) {
ctx.moveTo(list[0].x, list[0].y)
for(var j=0;j<i;j++){
ctx.lineTo(list[j+1].x, list[j+1].y)
};
ctx.stroke()
}
if(i == 3) {
ctx.moveTo(list[0].x, list[0].y)
for(var j=0;j<i;j++){
ctx.lineTo(list[j+1].x, list[j+1].y)
};
ctx.stroke()
}if(i==4){
ctx.moveTo(list[0].x, list[0].y)
for(var j=0;j<i;j++){
ctx.lineTo(list[j+1].x, list[j+1].y)
};
ctx.stroke()
}if(i==5){
ctx.moveTo(list[0].x, list[0].y)
for(var j=0;j<i;j++){
ctx.lineTo(list[j+1].x, list[j+1].y)
};
ctx.stroke()
}
if(i==6){
ctx.moveTo(list[0].x, list[0].y)
for(var j=0;j<i;j++){
ctx.lineTo(list[j+1].x, list[j+1].y)
};
ctx.stroke()
}
if(i==7){
ctx.moveTo(list[0].x, list[0].y)
for(var j=0;j<i;j++){
ctx.lineTo(list[j+1].x, list[j+1].y)
};
ctx.stroke()
}
}
cvs = document.getElementById("myCanvas");
ctx = cvs.getContext('2d');
ctx.fillText("1",35,10);
ctx.fillText("2",30,470);
ctx.fillText("3",30,400);
ctx.fillText("4",30,330);
ctx.fillText("5",30,260);
ctx.fillText("6",30,190);
ctx.fillText("7",30,120);
ctx.fillText("8",30,50);
draw();

function draw(p) {
/*ctx.clearRect(0, 0, cvs.width, cvs.height);*/
var who = [];
arr.forEach(function(v, i) {
ctx.beginPath();
ctx.rect(v.x, v.y, v.width, v.height);
ctx.stroke();
if(p && ctx.isPointInPath(p.x, p.y)) {
//如果传入了事件坐标,就用isPointInPath判断一下
//如果当前环境覆盖了该坐标,就将当前环境的index值放到数组里
ctx.fillStyle = "red";
ctx.beginPath();
ctx.rect(v.x, v.y, v.width, v.height);
ctx.fill();

$(".road").append(v.x,v.y,"--");
who.push(i);
line(i);
} else {
ctx.clearRect(v.x, v.y, v.width, v.height);
}
});
//根据数组中的index值,可以到arr数组中找到相应的元素。
return who;
}

//绑定事件
cvs.addEventListener('click', function(e) {
var t=$(".road").html();
if(t!=""){
alert("已经选择过路径了")
return false;
}
p = getEventPosition(e);
draw(p);

}, false);

//判断对象发生的位置
function getEventPosition(ev) {
var x, y;
if(ev.layerX || ev.layerX == 0) {
x = ev.layerX;
y = ev.layerY;
} else if(ev.offsetX || ev.offsetX == 0) { // Opera
x = ev.offsetX;
y = ev.offsetY;
}
return {
x: x,
y: y
};
}
</script>
<div style="position:absolute;bottom:18%">
路径:<textarea style="width: 400px;height:100px;font-size:22px ;" class="road"></textarea>
</div>
<button onclick="sx()" style="bottom:40% ;left:200px;position:absolute">重选</button>
<script>
function sx(){
history.go(0);
}
</script>
</body>

</html>

热心网友

城市的层面上; 吗;了

热心网友

sun fly you

热心网友

楼主这个问题解决了吧?可以跟我发一份源码吗?

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com