Canvas 点击并拖动整个背景（类似游戏）

我想做一个战略/管理游戏。 我希望用户能够单击背景来移动内容。（完整内容无法在屏幕上显示，因为它应该更大） 这是一个常见的功能，但我不知道怎么做。

---

这里面有什么东西吗？可能有任何库吗？

这是一张大的世界地图，你可以拖动。你可以根据需要为游戏更改图像

var ctx=canvas.getContext（'2d'），
ix=0，iy=0，///图像位置
offsetX=0，offsetY=0，///当前偏移量
deltaX，deltaY，///鼠标按下的Delta
mouseDown=false，///鼠标拖动
img=null，///背景
rect，///rect位置
rectW=200，rectH=150；//高光区域的大小
///我们从设定尺寸开始
设置大小（）；
///加载背景，然后开始
img=新图像（）；
img.onload=更新；
img.src=http://www.mytripolog.com/wp-content/uploads/2011/05/large-size-world-map.jpg';
canvas.onmousedown=函数（e）{
///在我们有图像之前不要做任何事
if（img==null）返回；
///正确的鼠标位置
var coords=getPos（e），
x=坐标[0]，
y=坐标[1]；
///将当前位置存储到计算三角洲
deltaX=x；
deltaY=y；
///我们走吧。。
mouseDown=true；
}
canvas.onmousemove=函数（e）{
///一拖再拖？
if（mouseDown==真）{
var coords=getPos（e），
x=坐标[0]，
y=坐标[1]；
///偏移=当前-原始位置
offsetX=x-代尔税；
offsetY=y-三角洲；
///重画到目前为止我们所拥有的
更新（）；
}
}
document.onmouseup=函数（e）{
///你当时心情不好吗？
if（mouseDown==真）{
///不再是了！！！
mouseDown=false；
///使图像位置永久化
ix+=抵销x；
iy+=偏移量；
///所以我们也需要重置偏移量
offsetX=offsetY=0；
}
}
///调整窗口大小以便重新绘制画布和矩形
window.onresize=设置大小；
///主抽签
函数更新（）{
if（img==null）返回；
///限制x/y，因为drawImage无法使用负片绘制
///用于剪裁的偏移量
如果（ix+offsetX>rect[0]）ix=rect[0]-offsetX；
如果（iy+offsetY>rect[1]），iy=rect[1]-offsetY；
///清除背景以清除垃圾
clearRect（0，0，canvas.width，canvas.height）；
///使一切透明
ctx.globalAlpha=0.2；
///画完整的背景
ctx.drawImage（img、ix+offsetX、iy+offsetY）；
///重置alpha，因为下一次绘制需要不透明度
ctx.globalAlpha=1；
///绘制背景的剪裁版本，然后
///调整偏移和图像位置
ctx.drawImage（img，-ix-offsetX+rect[0]，///sx
-iy-offsetY+rect[1]，///sy
rect[2]，rect[3]，///sw/h
///目的地
rect[0]，rect[1]，rect[2]，rect[3]；
///通过将边框偏移半像素来制作一个漂亮的锐利边框
ctx.strokeRect（rect[0]+0.5，rect[1]+0.5，rect[2]，rect[3]）；
}
///通过使鼠标位置相对于画布来更正鼠标位置
函数getPos（e）{
var r=canvas.getBoundingClientRect（），
x=e.clientX-r.left，
y=e.clientY-r.top；
返回[x，y]；
}
///与窗和窗相关的计算画布w/h
///使用预定义的
///宽度和高度
函数setSize（）{
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
rect=[canvas.width*0.5-rectW*0.5，
画布高度*0.5-矩形*0.5，
rectW，rectH]
更新（）；
}

---

这是一张巨大的世界地图，你可以拖动。你可以根据需要为游戏更改图像

var ctx=canvas.getContext（'2d'），
ix=0，iy=0，///图像位置
offsetX=0，offsetY=0，///当前偏移量
deltaX，deltaY，///鼠标按下的Delta
mouseDown=false，///鼠标拖动
img=null，///背景
rect，///rect位置
rectW=200，rectH=150；//高光区域的大小
///我们从设定尺寸开始
设置大小（）；
///加载背景，然后开始
img=新图像（）；
img.onload=更新；
img.src=http://www.mytripolog.com/wp-content/uploads/2011/05/large-size-world-map.jpg';
canvas.onmousedown=函数（e）{
///在我们有图像之前不要做任何事
if（img==null）返回；
///正确的鼠标位置
var coords=getPos（e），
x=坐标[0]，
y=坐标[1]；
///将当前位置存储到计算三角洲
deltaX=x；
deltaY=y；
///我们走吧。。
mouseDown=true；
}
canvas.onmousemove=函数（e）{
///一拖再拖？
if（mouseDown==真）{
var coords=getPos（e），
x=坐标[0]，
y=坐标[1]；
///偏移=当前-原始位置
offsetX=x-代尔税；
offsetY=y-三角洲；
///重画到目前为止我们所拥有的
更新（）；
}
}
document.onmouseup=函数（e）{
///你当时心情不好吗？
if（mouseDown==真）{
///不再是了！！！
mouseDown=false；
///使图像位置永久化
ix+=抵销x；
iy+=偏移量；
///所以我们也需要重置偏移量
offsetX=offsetY=0；
}
}
///调整窗口大小以便重新绘制画布和矩形
window.onresize=设置大小；
///主抽签
函数更新（）{
if（img==null）返回；
///限制x/y，因为drawImage无法使用负片绘制
///用于剪裁的偏移量
如果（ix+offsetX>rect[0]）ix=rect[0]-offsetX；
如果（iy）