我非常喜歡帆布遊戲開發的初學者,所以請原諒我一個愚蠢的問題。在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框架中運行應用程序。
喜先生修改彈跳屏幕,感謝回答。其實我需要水平和垂直滾動,並且還需要通過畫布繪製圖像,並在HTML中使用畫布標記。可能嗎?? –
如果您還有一個圖像使用命令空白:無法在畫布中換行。 – RiKo
不,我只有一個圖像,我想把它放在畫布上。我在移動設備上運行它,現在它也出現在屏幕上。內部圖像未設置屏幕邊距 –