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

Question

I am very much a beginner in canvas game development, so please forgive me for a silly question. 我是画布游戏开发的初学者，因此请原谅我一个愚蠢的问题。

I have a image with 2048px width and 1536px height which I need to place in a canvas (width and height vary with different devices). 我有一张宽度为2048px，高度为1536px的图像，需要将其放置在画布中（宽度和高度因设备而异）。 I am able to scroll the image but the problem is that the image is coming out of the screen (showing white space in all the edges). 我可以滚动图像，但是问题是图像从屏幕上出来了（所有边缘都显示空白）。 Suppose devices width is 430 and height is 300 then user can scroll the image to see. 假设设备的宽度为430，高度为300，则用户可以滚动图像进行查看。 If I swipe the screen for scrolling then image is coming out of the canvas just like pulling a rubber if I stop swiping image will place to canvas borders. 如果我滑动屏幕进行滚动，则图像会从画布中消失，就像拉动橡胶一样，如果我停止滑动，图像将放置在画布边框上。 Scrolling image is not fixing with canvas borders.. I am trying this since days.. Please anybody help me.. 滚动图像无法使用画布边框固定。.几天以来我一直在尝试此操作..请任何人帮助我..

<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";  
  }

I have searched before asking question but couldn't something perfect. 在提出问题之前，我已经进行了搜索，但不能完美。 I am running the app in PhoneGap framework using Canvas, JavaScript, and CSS. 我正在使用Canvas，JavaScript和CSS在PhoneGap框架中运行该应用程序。

Answer 1

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

}

#inner {
overflow: auto;
}

Do not use width and height for inner. 内部不要使用宽度和高度。 Just put your image into inner. 只需将您的图像放入内部即可。

DEMO: 演示：

http://jsfiddle.net/WY7fE/ http://jsfiddle.net/WY7fE/

Answer 2

糟糕，最后我找到了答案，我们可以通过在config.xml中修改来停止弹跳屏幕。在此处找到答案如何防止在手机间隙中运行的应用垂直滚动？

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

问题描述

2 个解决方案

解决方案1
0

解决方案2
0 已采纳

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

问题描述

2 个解决方案

解决方案1 0

解决方案2 0 已采纳

解决方案1
0

解决方案2
0 已采纳