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

【问题标题】：Scroll(Not moving a image) image in HTML5 canvas在 HTML5 画布中滚动（不移动图像）图像
【发布时间】：2013-09-29 02:16:52
【问题描述】：

我是画布游戏开发的初学者，所以请原谅我提出一个愚蠢的问题。

我有一个宽度为 2048 像素、高度为 1536 像素的图像，我需要将其放置在画布中（宽度和高度因设备而异）。我可以滚动图像，但问题是图像从屏幕中出来（在所有边缘显示空白）。假设设备宽度为 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 框架中运行该应用程序。

【问题讨论】：

标签： javascript android css canvas cordova

【解决方案1】：

哎呀，终于找到答案了，我们可以通过在config.xml中修改来停止弹屏在这里找到答案How to prevent app running in phone-gap from scrolling vertically?

【讨论】：

【解决方案2】：

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

}

#inner {
overflow: auto;
}

不要在内部使用宽度和高度。只需将您的图像放入内部即可。

演示：

http://jsfiddle.net/WY7fE/

【讨论】：

您好，先生，感谢您的回复。实际上我需要水平和垂直滚动，还需要通过画布绘制图像，并且我在 html 中有画布标签。有可能吗？？
如果您还有一张图片，请使用命令 white-space:no wrap in canvas。
不，我只有一张图片，我想把它放到画布上。我在移动设备上运行它，现在它也从屏幕上出来了。内部图像未设置屏幕边距
放置后图片会滚动到画布中，如果你使用oferlow:auto作为inner的话。
是的，我已经检查过了，但我的问题是在画布中滚动图像，它不应该留下空间边缘，是否不能在 css 中将边距设置为 0，是的，它可能，但为什么它不工作？