rpg一个窗口中滚动显示整个大地图——h5游戏

首先 需要jquery插件

首先，准备一张背景图，越大越好
比如·

    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游戏感兴趣的盆友可以一起交流哈啊
以下是效果图 图片不大 窗口设置的比较小