如题所述
第1个回答 2022-12-11
本文实例分享了html5 canvas可拖动省份的中国地图实现方法,供大家参考,具体内容如下
鼠标移动事件:根据点击的省份名,获得数据,并实时重绘移动层的省份
var mouseX, mouseY;
if(ev.layerX || ev.layerX==0){
mouseX = ev.layerX;
mouseY = ev.layerY;
}else if(ev.offsetX || ev.offsetX==0){
mouseX = ev.offsetX;
mouseY = ev.offsetY;
}
if(draging){
if(opts.dragAll){ <span style="font-family: Arial, Helvetica, sans-serif;">//拖动整个地图,存在问题,地图画的太慢</span>
mapContext.clearRect(0, 0, 1100, 630);
for(var i = 0;i < allZoneData.length;i++){
for(var j = 0;j < allData[allZoneData[i].name].length;j++){ //allData是第一次读取数据时放到内存里的变量,它包含了所有数据
pubFuns.drawMap(mapContext,allData[allZoneData[i].name][j],mouseX - tempX, mouseY - tempY);
}
}
}else{
moveMapContext.clearRect(0, 0, 1100, 630);
pubFuns.drawMoveLayerLine(mouseX - tempX, mouseY - tempY);
}
}
});
鼠标抬起事件:设置dragging为false,clear移动层。
if(opts.dragAll){
}else{
moveMapContext.clearRect(0, 0, 1100, 630);
}
draging = false;
});
小结:功能、原理都很简单,但能熟悉canvas的一些属性和方法。canvas层是可以重叠到一起的,这样就可以在不同的层画不同的内容,方便维护和管理。
以上就是本文的全部内容,希望对大家的学习有所帮助。