HTML5 Canvas元素绘制地图,如何实现显示鼠标所移动地方名称?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML5 Canvas元素绘制地图,如何实现显示鼠标所移动地方名称?相关的知识,希望对你有一定的参考价值。

参考技术A

本文实例分享了html5 canvas可拖动省份的中国地图实现方法,供大家参考,具体内容如下

鼠标移动事件:根据点击的省份名,获得数据,并实时重绘移动层的省份

$('#eventCanvas').mousemove(function(ev) 
 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移动层。

$('#eventCanvas').mouseup(function(e) 
 if(opts.dragAll)  
 else 
  moveMapContext.clearRect(0, 0, 1100, 630); 
  
 draging = false; 
);

小结:功能、原理都很简单,但能熟悉canvas的一些属性和方法。canvas层是可以重叠到一起的,这样就可以在不同的层画不同的内容,方便维护和管理。

以上就是本文的全部内容,希望对大家的学习有所帮助。

以上是关于HTML5 Canvas元素绘制地图,如何实现显示鼠标所移动地方名称?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用canvas绘制走势图

如何在html5的canvas绘制地图

unity怎么把canvas做成小地图

HTML5Canvas绘制效率如何?

HTML5 Canvas ~ 使用绘制元素平滑快速缩放,而不是图像 ~ 如何?

利用canvas绘制图形