本文实例分享了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层是可以重叠到一起的，这样就可以在不同的层画不同的内容，方便维护和管理。
以上就是本文的全部内容，希望对大家的学习有所帮助。
只能获取鼠标对于画布的事件，可以根据点击范围判断点击的内容，然后做相应 *** 作
<!doctype html><html>
<head></head>
<body>
<canvas id="canvas" width="500" height="500" style = "border:1px solid red"></canvas>
<script>
var rect={x:100,y:100,w:40,h:20}//定义要画的矩形的位置属性
var canvas=document.getElementById('canvas')
var cxt=canvas.getContext('2d')
cxt.fillRect(rect.x,rect.y,rect.w,rect.h)//绘制矩形
canvas.onclick=function(e){//给canvas添加点击事件
e=e||event//获取事件对象
//获取事件在canvas中发生的位置
var x=e.clientX-canvas.offsetLeft
var y=e.clientY-canvas.offsetTop
//如果事件位置在矩形区域中
if(x>=rect.x&&x<=rect.x+rect.w&&y>=rect.y&&y<=rect.y+rect.h){
window.open('链接地址')//打开指定链接
}
}
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）