在HTML5画布中滚动（不移动图像）图像

我非常喜欢帆布游戏开发的初学者，所以请原谅我一个愚蠢的问题。在HTML5画布中滚动（不移动图像）图像

我有一个2048px宽度和1536px高度的图像，需要放置在画布中（宽度和高度因不同的设备而异）。我能够滚动图像，但问题是图像从屏幕中出来（显示所有边缘的空白）。假设设备宽度为430，高度为300，那么用户可以滚动图像查看。如果我滑动屏幕进行滚动，那么图像会从画布中出来，就像拉动橡皮，如果我停止滑动图像将放置到画布边框。滚动画面没有画布边框固定..因为天我想这个..请人帮助我..

<html> 
<head> 
<style> 
body { 
    margin: 0px; 
    padding: 0px; 
} 
#container { 
    width: 100%; 
    height: 100%; 
    z-index:-1; 
} 

#inner { 
    width: 1000px; 
    height: 1000px; 
    overflow: scroll; 
} 
</style> 


<!-- Adding viewport --> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, user-scalable=no"> 
<script type="text/javascript" src="js/jquery_v1.9.1.js"></script> 
<script type="text/javascript" charset="utf-8" src="cordova.js"></script> 
<script type="text/javascript" src="js/index.js"></script> 
<script type="text/javascript" src="js/cityPrototype.js"></script> 
</head> 
<body> 
<div id="container"> 
    <div id="inner"> 
     <canvas id="can1"> </canvas> 
    </div> 
</div> 
</body> 
    </html> 
Here is Javascript function 
function init(){ 

can = document.getElementById('can'); 
cxt = can.getContext('2d'); 

can.width = can.parentNode.clientWidth; 
can.height = can.parentNode.clientHeight; 

bg.onload=function(){ 
alert("Onload"); 

cxt.drawImage(bg,0,0,can.width,can.height); 
width, height); 
}; 
bg.src = "img/01.jpg"; 
    }

我已搜查问问题之前，但不能完美的东西。我使用Canvas，JavaScript和CSS在PhoneGap框架中运行应用程序。

来源

2013-09-26 Mallikarjun Hampannavar

哎呀，我终于找到了答案，我们可以停下来在这里发现的config.xml答案How to prevent app running in phone-gap from scrolling vertically?

来源

2013-09-28 18:16:52

#container { 
width: 100%; 
z-index:-1; 

} 

#inner { 
overflow: auto; 
}

不要对内部使用宽度和高度。只要把你的形象纳入内心。

DEMO：

http://jsfiddle.net/WY7fE/

来源

2013-09-26 09:44:07 RiKo

喜先生修改弹跳屏幕，感谢回答。其实我需要水平和垂直滚动，并且还需要通过画布绘制图像，并在HTML中使用画布标记。可能吗？？ –

如果您还有一个图像使用命令空白：无法在画布中换行。 – RiKo

在HTML5画布中滚动（不移动图像）图像

回答

相关问题