在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畫布中滾動（不移動圖像）圖像

回答

相關問題