Scroll(Not moving a image) image in HTML5 canvas
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). 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. 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.
2 answers
solution1
0
#container {
width: 100%;
z-index:-1;
}
#inner {
overflow: auto;
}
Do not use width and height for inner. Just put your image into inner.
DEMO:
solution2
0 ACCPTED
糟糕，最后我找到了答案，我们可以通过在config.xml中修改来停止弹跳屏幕。在此处找到答案如何防止在手机间隙中运行的应用垂直滚动？
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.