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

本文实例分享了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 = 0i < allZoneData.lengthi++){ 

    for(var j = 0j < allData[allZoneData[i].name].lengthj++){ //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层是可以重叠到一起的，这样就可以在不同的层画不同的内容，方便维护和管理。

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

答：下面是源码 主文件test.htm :( 抱歉~ 您的浏览器貌似不支持HTML5的标签"canvas"的说，试试更换成Chrome,FireFox,IE9... window.onload=function(){ var canvas=document.getElementById("canvas"), context=canvas.getContext('2d'), mouse=util...

加入一个间隔30ms（举个例子，可以根据实际情况修改）的定时器，

当你按下某个键（以左键为例），修改一个全局量bLeftDown=true

定时器中检测bLeftDown，当bLeftDown时，执行 x-=1   *** 作，

当你松开某个按键的时候，修改一个全局量bLeftDown=false

这样就可以比较流畅的移动矩形了

我的空战游戏就是这么做的，效果很好

var VK_UP = 38var VK_DOWN = 40var VK_RIGHT = 39var VK_LEFT = 37

var VK_A = 65

document.onkeydown = function(event){

    //这个函数处理按键按下事件

        if (event.keyCode == VK_A || event.keyCode == VK_LEFT && !bLeftDown)        {             bLeftDown = true        }

//....其他判断

}document.onkeyup = function(event){

    //这个函数处理按键松开事件

    //类似处理，省略

}

---