首先 需要jquery插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>巡检地图</title>
<script src="../js/jquery-3.2.1.js"></script>
<style>
#backLayer{
position: relative;
}
#mycanvas{
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
}
</style>
</head>
<body style="background-color: black">
<div id="backLayer">
<canvas id="mycanvas" style="border: 1px #cccccc solid">
</canvas>
</div>
<script>
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
canvas.width = 300;
canvas.height = 300;
var img = new Image();
img.src = '../images/地图2.jpg';
img.οnlοad=function(){
//从图片x,y位置截取图 z是计时器
var x=0, y= 0,z=0;
function animate() {
//done();
z++;
if (z>=15){
$("#mycanvas").mousemove(
function(e){
z = 0;
// 1 当鼠标在画布的右边
if(e.offsetX>270){
//如果 x 小于图片宽度减去画布宽度
if(x<=(img.width-300)){
x += 0.1;
}
}
//2 当鼠标在画布的下边
if(e.offsetY>270){
// y小于图片高度减去画布高度
if(y<=(img.height-300)){
y += 0.1;
}
}
//3 当鼠标在画布的左边
if(e.offsetX<30){
//x大于0
if(x>0){
x -= 0.1;
}
}
//4 当鼠标在画布的上边
if(e.offsetY<30){
//y大于0
if(y>0){
y -= 0.1;
}
}
}
)
}
canvas.style.top=y+"px";
canvas.style.left=x+"px";
context.drawImage(img,x,y,300,300,0,0,300,300);
globalID = requestAnimationFrame(animate);
// if(){
//
// cancelAnimationFrame(globalID);//结束
// }
}
requestAnimationFrame(animate);//开始
}
</script>
</body>
</html>
首先,准备一张背景图,越大越好
比如·
var img = new Image();
img.src = '../images/地图2.jpg';
然后就是这个方法
context.drawImage(img,x,y,300,300,0,0,300,300);
这个方法的参数是:
//截取图片imgx,y的长300,宽300的矩形图像缩放到(后面的)300,300矩形大小展示在画板的0,0处 也就是说 我们可以通过改变x,y的值截取图片的不同位置 显示在画板上
下面的方法是画板移动
canvas.style.top=y+"px";
canvas.style.left=x+"px";
不是必要 如果你的窗口够大 并且在地图的中间 你只需要图片滚动即可
当鼠标停留在画板的上下左右边沿 有一个判定 就是当图片在这个方向的边沿,就不会移动
// 1 当鼠标在画布的右边
if(e.offsetX>270){
//如果 x 小于图片宽度减去画布宽度
if(x<=(img.width-300)){
x += 0.1;
}
}
其中 var z的值先当与一个延时器 避免画面移动过快
img.onload方法是图片加载完成后运行 ,不然不能取到图片的 宽和高
以上就是 在一个窗口中滚动显示整个大地图的方法 本人新手 有对h5游戏感兴趣的盆友可以一起交流哈啊
以下是效果图 图片不大 窗口设置的比较小