<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>