0

嗨，我对 Android 4.1 上的 JQuery Mobile 1.1.1、Phonegap 2.0 有疑问。我想用 JS 和 HTML5 在画布上绘制一个矩形。

那是我的 HTML5 页面：

<!DOCTYPE html>
<html>
<head> 
<title>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-2.0.0.js"></script>
</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>


    <div data-role="footer" data-position="fixed" data-id="persFooter">
        <div data-role="navbar">
            <ul>
                <li><a href="index.html" data-icon="home">Connect</a></li>
                <li><a href="carView.html" data-icon="gear">Vehicles</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>

我在内容 div 之后加载了 Java Script 文件。JS 文件如下所示：

var canvas = document.getElementById("myBatteryCanvas");
var context = canvas.getContext("2d");
var WIDTH = canvas.width;
var HEIGHT = canvas.height;
var x = 50;
var y = HEIGHT - 30;
var mx = 2;
var my = 1;
var prozent = 1;

context.clearRect(0, 0, WIDTH, HEIGHT);

function initBatt() {
x = 50;
y = HEIGHT - 30;
mx = 2;
my = 1;
prozent = 1;

context.clearRect(0, 0, WIDTH, HEIGHT);
context.rect(122, 40, 54, 100);
context.fillStyle = 'floralwhite';
context.fill();
context.lineWidth = 4;
context.strokeStyle = '#303030';
context.stroke();

}

 initBatt();
 //$(document).on("pageshow", initBatt);

问题：如果我使用最后一行来启动该功能，我将在第二次加载此页面后在画布上获得两个矩形。第一次，有一个矩形，没关系。第二次，有两个。在正确的坐标上，另一个在我的矩形后面的右边。但为什么？

如果我使用 initBatt(); 相反，声明完全没有问题。FF 或 IE9 的两条线都没有问题，仅在 Android 4.1 上！

想法？

到目前为止感谢！

4

1 回答 1

0

jQuery Mobile 缓存页面，因此它可能会initBatt()在缓存页面上调用您的函数，导致它再次绘制矩形，或者无论如何都沿着这些线绘制。

于 2012-07-24T11:21:55.623 回答