对不起请尝试将HTML元素map
你也许可以更简单地使用HTML map这将让你的用户点击一个图像的一部分并链接到一个新的更实现你的“向下钻取”到建筑具体的形象。
body{ background-color: ivory; padding:15px; }
canvas{border:1px solid red;}
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var floorplan=document.getElementById("floorplan");
var planCtx=floorplan.getContext("2d");
planCtx.font="24px Arial";
planCtx.fillStyle="red";
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var lastWindow=-1;
var plan=new Image();
var outside=new Image();
outside.οnlοad=function(){
plan.οnlοad=function(){
ctx.drawImage(outside,0,0);
}
plan.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/inside.jpg";
}
outside.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/outside.png";
var windows=[]
windows.push({top:66, left: 70, bottom:111, right:111, floorplan:0, apartment:"3a"});
windows.push({top:66, left:139, bottom:111, right:183, floorplan:0, apartment:"3b"});
windows.push({top:66, left:211, bottom:111, right:255, floorplan:0, apartment:"3c"});
windows.push({top:153, left: 70, bottom:196, right:111, floorplan:1, apartment:"2a"});
windows.push({top:153, left:139, bottom:196, right:183, floorplan:1, apartment:"2b"});
windows.push({top:153, left:211, bottom:196, right:255, floorplan:1, apartment:"2c"});
windows.push({top:239, left:139, bottom:283, right:182, floorplan:2, apartment:"1a"});
function selectWindow(x,y){
var w;
var isInWindow=false;
for(var i=0;i
w=windows[i];
if(x>w.left && xw.top && y
isInWindow=true;
if(i!=lastWindow){
planCtx.clearRect(0,0,floorplan.width,floorplan.height);
planCtx.drawImage(plan,0,0);
planCtx.fillText("Apt: "+w.apartment+", Plan: "+w.floorplan,70,25);
lastWindow=i;
}
break;
}
}
if(!isInWindow){ planCtx.clearRect(0,0,floorplan.width,floorplan.height); };
}
function handleMouseMove(e){
canMouseX=parseInt(e.clientX-offsetX);
canMouseY=parseInt(e.clientY-offsetY);
$("#movelog").html("Move: "+ canMouseX + "/" + canMouseY);
// Put your mousemove stuff here
selectWindow(canMouseX,canMouseY);
}
$("#canvas").mousemove(function(e){handleMouseMove(e);});
}); // end $(function(){});
Mouse over a window to see it's floorplan