我正在使用 JQuery 1.1.0 和 Phonegap 1.9.0 为 Android 开发一个 html5 应用程序。我有一个小动画，它在画布上绘制电池并更新它。它看起来像一个正在加载的电池。它在 android 4.0.4 上运行良好。
昨天，我在 Galaxy Nexus 上收到了 Android 4.1.1 的更新。在那次更改之后，我的动画出现了问题。现在它在画布上绘制图像，一个在前面，另一个在后面，坐标错误。我认为这与 Java Script Engine V8 的更改有关，也许是缓存问题？！在我电脑上的每个浏览器上，动画效果都很好。
我的html代码是：
<!DOCTYPE html>
<html>
<head>
<title>Hella App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css"/>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<style>
.ui-page { background: black;}
</style>
</head>
<body>
<div data-role="page" id="dataPageBattery" data-theme="a">
<h2 align="center">Battery State</h2>
<div data-role="header" data-position="fixed" data-theme="a">
<h1>Car Data</h1>
</div>
<div data-role="content" align="center">
<canvas id="myBatteryCanvas" width="device-width"
height="device-height">
Sorry, your browser doesn't support canvas technology
</canvas>
</div>
<h4 align="center" id="batteryProzent"></h4>
<script type="text/javascript" src="battery.js"></script>
<script>$(document).on("pageshow",init());</script>
<div data-role="footer" data-position="fixed" data-id="persFooter">
<div data-role="navbar">
<ul>
<li><a href="home.html" data-icon="home">Connect</a></li>
<li><a href="carView.html" data-icon="gear">Cars</a></li>
<li><a href="infoView.html" data-icon="info">Info</a></li>
</ul>
</div>
</div>
<script>
$('#dataPageBattery').on('swipeleft',function(){
$.mobile.changePage("geolocation.html", { transition: "slide"});
console.log('slideLeft');
})
$('#dataPageBattery').on('swiperight',function(){
$.mobile.changePage("fuelGauge.html", { transition: "slide", reverse: 'true'});
console.log('slideLeft');
})
</script>
</div>
</body>
</html>
我正在加载的 java 脚本代码：
var canvas = document.getElementById("myBatteryCanvas");
var ctx = canvas.getContext("2d");
var x = 50;
var y = canvas.height - 30;
var mx = 2;
var my = 1;
var WIDTH = canvas.width;
var HEIGHT = canvas.height;
var prozent = 1;
function drawRect(y, farbe) {
ctx.beginPath();
ctx.rect(124, y, 50, 21);
ctx.fillStyle = farbe;
ctx.fill();
window.setTimeout("draw()", 10);
}
function draw() {
if (y >= 80) {
y -= my;
window.setTimeout("drawRect(y,'red')", 10);
} else if (y >= 50) {
y -= my;
window.setTimeout("drawRect(y,'orange')", 10);
ctx.rect(124, 50 + 50, 50, 40);
ctx.fillStyle = 'orange';
ctx.fill();
} else {
ctx.rect(124, 50, 50, canvas.height - 60);
ctx.fillStyle = 'lightgreen';
ctx.fill();
}
document.getElementById('batteryProzent').innerHTML = '> ' + prozent + ' %';
prozent++;
if (prozent % 4 == 0)
prozent++;
}
function init() {
ctx.rect(122, 40, 54, 100);
ctx.fillStyle = 'floralwhite';
ctx.fill();
ctx.lineWidth = 4;
ctx.strokeStyle = '#303030';
ctx.stroke();
draw();
}
另一个很好的问题：如果我在 Phonegap 代码中使用这个 html 页面作为第一页，没有问题。但是如果我在整个应用程序中使用它，我就会遇到问题。出于这个原因，我也发布了我的第一页：
<!DOCTYPE html>
<html>
<head>
<title> BLE App</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="Logo.png" />
<link rel="stylesheet" href="jquery.mobile-1.1.0.min.css"/>
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.mobile-1.1.0.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<style>
.ui-page { background: black;}
</style>
</head>
<body>
<div data-role="page" id="mainPage" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="a">
<h1> BLE</h1>
</div><!-- /header -->
<div data-role="content">
<!-- <p> BLE Test App</p> -->
<label for="mainPage_textFrage">Find BLE Devices:</label>
<!-- <input type="text" id="mainPage_textFrage" value="" placeholder="Ihre Frage"/> -->
<a data-role=button id="mainPage_showAnswerButton">Search</a>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="persFooter">
<div data-role="navbar">
<ul>
<li><a href="home.html" data-icon="home">Connect</a></li>
<li><a href="carView.html" data-icon="gear">Cars</a></li>
<li><a href="infoView.html" data-icon="info">Info</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
<script>
$('#mainPage_showAnswerButton').on('click',function(){
$.mobile.changePage("searchResult.html", { transition: "slideup"});
console.log('click');
})
</script>
</body>
</html>
有人有同样的问题吗？有人可以帮忙吗？
到目前为止感谢！
更新：我将 JQuery 更新到 1.7.2，将 JQuery Mobile 更新到 1.1.1。但仍然没有任何变化。动画不工作。