HTML5两个画布如何弄,HTML5画布绘制两个rects而不是一个

嗨我有一个问题，在Android 4.1上的JQuery Mobile 1.1.1 Phonegap 2.0。 我想用JS和HTML5在画布上绘制矩形。HTML5画布绘制两个rects而不是一个

这就是我的HTML5页：

App

Battery State

Car Data

Sorry, your browser doesn't support canvas technology

• Connect
• Vehicles
• Info

$('#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');

})

我加载Java脚本文件，内容DIV之后。 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);

问题：如果我使用的最后一行启动功能，我会后第二次我打开这个网页在画布上得到两个rects。第一次，有一个正义，那没关系。时间有两个。在右边坐着，另一边在右边。但为什么？

如果我使用initBatt();声明，而没有任何问题。 对于FF或IE9，两行都没有问题，只能在Android 4.1上使用！

想法？

到目前为止感谢！

2012-07-23

fluxim