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>

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

問題: 最後の行を使用して関数を開始すると、このページを 2 回目に読み込んだ後、キャンバスに 2 つの四角形が表示されます。初めて、1 つの rect がありますが、それで問題ありません。2回目は2人です。正しい座標を使用し、Rect の右側に別の座標を配置します。しかし、なぜ？

initBatt(); を使用すると、ステートメントではなく、まったく問題はありません。どちらの行も FF または IE9 では問題ありませんが、Android 4.1 のみで問題ありません!

アイデア？

これまでありがとう！

4

1 に答える 1

0

jQuery Mobile はページをキャッシュするため、おそらくinitBatt()キャッシュされたページで関数を呼び出して、長方形を再度描画するか、とにかくそれらの線に沿って何かを描画します。

于 2012-07-24T11:21:55.623 に答える