Javascript HTML5画布绘制两个矩形，而不是一个_Javascript_Android_Html_Animation

Javascript HTML5画布绘制两个矩形，而不是一个

javascript android html animation

Javascript HTML5画布绘制两个矩形，而不是一个,javascript,android,html,animation,Javascript,Android,Html,Animation,您好，我对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"> <

您好，我对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>

问题：如果使用最后一行启动函数，则在第二次加载此页面后，画布上会出现两个矩形。第一次，有一个矩形，没关系。第二次，有两次。在正确的坐标上，另一个在我的矩形后面的右边。但是为什么呢

如果我使用initBatt（）；相反，没有任何问题。使用这两条线，FF或IE9没有问题，仅在Android 4.1上

想法

谢谢你

jQuery Mobile缓存页面，因此它可能在缓存页面上调用您的

initBatt（）

函数，导致它再次绘制矩形，或者沿着这些线绘制。如何防止jQuery Mobile缓存？看起来是这样的，因为没有调用两次的内容。刷新时，会再次调用

initBatt（）

，使其成为两次。使用其他坐标？我无法刷新我正在Android上使用Phonegap。我在两页之间滑动！如何防止第二次呼叫？更新：我在initBatt（）中放置了一个标志来控制，如果它被调用了两次。它不是！仍然是相同的问题。请阅读jQuery Mobile的事件（）以查看何时应调用initBatt（）。我使用.on（）方法对事件页面显示执行此操作！那有什么问题？

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);