Javascript 在Android中，画布未在原始位置清除

我正在与phonegap合作，并试图为Android开发一个简单的应用程序，其中一个基于加速度计的球在周围滚动。我使用的画布占据了整个屏幕，并为球画了一个圆圈

一切正常，除了画布在每一帧之间没有被正确清除。它清除除原始位置的球之外的所有内容。所以总是有2个球，一个在周围移动，一个在中间静止。< /P> 这是我的渲染函数

function render(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(posX, posY, size, 0, 2*Math.PI, false);
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.stroke();
}

我尝试过使用

canvas.width=canvas.width

，但这只是将假球移动到真实球的当前位置。如果我每帧都这样做，它的性能也会非常差

当我使用浏览器（Chrome）并用控制台移动球时，这个问题不会发生

真正奇怪的是，它并不总是发生。有时在极少数情况下，当我启动应用程序或使用canvas.width时，假球会消失

编辑： 在不同的设备上测试，问题只出现在我的三星Galaxy Note（安卓4.1.2）上，而在我的HTC Desire HD（安卓2.3.5）和iPhone 5（iOS 7.1）上运行良好

完整代码

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
    navigator.accelerometer.watchAcceleration(onSuccess, onError, { frequency: 100 });
}
function onSuccess(acc){
    accX = -acc.x;
    accY = acc.y;
}
function onError(message){
    alert('Failed because: ' + message);
}

var size = 40;
var speed = 80;
var posX;
var posY;
var speedX;
var speedY;
var accX;
var accY;

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = screen.width / window.devicePixelRatio;
canvas.height = screen.height / window.devicePixelRatio;
document.body.appendChild(canvas);

reset();
var then = Date.now();
setInterval(main, 1);

function reset(){
    posX = canvas.width/2;
    posY = canvas.height/2;
    speedX = 0;
    speedY = 0;
    accX = 0;
    accY = 0;
}

function update(mod){
    speedX += accX*mod;
    speedY += accY*mod;

    posX += speedX*mod*speed;
    posY += speedY*mod*speed;

    if((posX < 0-size) || (posX > canvas.width+size) || (posY < 0-size) || (posY > canvas.height+size))
        reset();
}

function render(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(posX, posY, size, 0, 2*Math.PI, false);
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.stroke();
}

function main(){
    var now = Date.now();
    var delta = now - then;
    update(delta/1000);
    render();
    then = now;
}

document.addEventListener（“DeviceRady”，OnDevicerady，false）；
函数ondevicerady（）{
navigator.Accelerator.watchAcceleration（onSuccess，onError，{频率：100}）；
}
成功时的功能（acc）{
accX=-acc.x；
accY=acc.y；
}
函数onError（消息）{
警报（'失败原因：'+消息）；
}
变量大小=40；
无功转速=80；
var-posX；
var posY；
var-speedX；
快速变化；
var-accX；
var accY；
var canvas=document.createElement（“canvas”）；
var ctx=canvas.getContext（“2d”）；
canvas.width=screen.width/window.devicePixelRatio；
canvas.height=screen.height/window.devicePixelRatio；
document.body.appendChild（画布）；
重置（）；
var then=Date.now（）；
设置间隔（主，1）；
函数重置（）{
posX=canvas.width/2；
posY=canvas.height/2；
speedX=0；
速度=0；
accX=0；
accY=0；
}
功能更新（mod）{
speedX+=accX*mod；
迅捷+=accY*mod；
posX+=speedX*mod*速度；
posY+=速度*模式*速度；
如果（（posX<0-size）| |（posX>画布宽度+大小）| |（posY<0-size）| |（posY>画布高度+大小））
重置（）；
}
函数render（）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.beginPath（）；
ctx.arc（posX，posY，size，0，2*Math.PI，false）；
ctx.fillStyle='红色'；
ctx.fill（）；
ctx.lineWidth=2；
ctx.strokeStyle=‘黑色’；
ctx.stroke（）；
}
函数main（）{
var now=Date.now（）；
var delta=现在-那时；
更新（delta/1000）；
render（）；
然后=现在；
}

我没有清理画布，而是尝试用白色填充

context.fillStyle = "#FFFFFF";
context.fillRect(0, 0, canvas.width, canvas.height);

---

我在LG P880、CyanogenMod 10.1上测试了它，它的Android浏览器也上市了，之后原来的画布就消失了。

我的应用程序也有同样的问题。有解决方案吗？还没有找到解决方案，但我还没有真正着手解决。在不同的设备上测试，只有一个设备出现问题。我用一些信息更新了这个问题，这对我来说很有用。