我非常喜欢帆布游戏开发的初学者,所以请原谅我一个愚蠢的问题。在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
不,我只有一个图像,我想把它放在画布上。我在移动设备上运行它,现在它也出现在屏幕上。内部图像未设置屏幕边距 –