Javascript 画布绘图不'；不要总是在Android webview中渲染

我正在尝试为手机制作一种足球游戏，它利用手机的陀螺机制。我有两张画布：一张画的是场线，另一张画的是球的实际运动。它在桌面浏览器中运行良好（当然陀螺部分除外），但当我尝试在Android的webview中使用它时，有时我的场线没有画出来。有时球也不会被抽到，但我想解决一个问题可以帮助解决另一个问题。以下是我的标记：

<div class="wrap">
    <canvas id="canvasField" height="100%" width="100%"></canvas>
    <div id="icon">image</div>
    <div id="name">name</div>
    <div id="action-container">
        <div id="shake-container">
            <img src="images/score_icon.png" id="shake-icon" />
        </div>
        <div id="score-to-play">Score a goal</div>
    </div>
    <canvas id="canvasPlay" height="568" width="320">Your browser does not support the HTML5 canvas tag.</canvas>
</div>

下面是JSFIDLE：

---

是什么导致了它，我如何修复它？

您在

canvasPlay

canvas上渲染的是什么？由于您有两张画布重叠，并且您没有为它们指定

z-index

，因此最终的构图可能会有所不同。

canvasPlay

是我画球的地方。由于我使用陀螺仪，我必须每40毫秒在新的位置重新绘制球。我不想每次都重新绘制场地，所以我把它放在另一块画布上。每个元素都是绝对定位的，因此如果我不指定

z-index

，它们会相互堆叠，不是吗？我只是用

z-index

尝试了一下，但没有什么区别，字段仍然没有偶尔绘制。好的，你能试着打开和关闭硬件加速吗（），还可以告诉您这是在哪个设备和Android版本上发生的？您也可以尝试调用

webView.setLayerType（View.LAYER\u TYPE\u SOFTWARE，null）以强制执行软件渲染。如果有帮助的话，那么我真的很想知道，这是在什么硬件和软件上发生的。
var canvasField,
    ctx,
    wWidth,
    wHeight,
    topLeftX,
    topLeftY,
    topRightX,
    topRightY,
    bottomLeftX,
    bottomLeftY,
    bottomRightX,
    bottomRightY,
    centerX,
    centerY,
    netImg,
    netX,
    netY,
    hitAreaX,
    hitAreaY,
    icon,
    appName,
    gameInterval,
    info;

/* CONSTANTS */
var marginTop  = 60,
    marginSide = 20,
    netWidth = 175,
    netHeight = 48,
    lineWidth = 6,
    centerCircleRadius = 100,
    ballRadius = 25,
    hitAreaWidth = netWidth-ballRadius,
    hitAreaHeight = lineWidth,
    lineColor = "#ffffff";

window.addEventListener("load", function(){setTimeout(init, 200)});

function init(){
    wWidth = window.innerWidth;
    wHeight = window.innerHeight;
    topLeftX = bottomLeftX = marginSide;
    topLeftY = topRightY = marginTop;
    topRightX = bottomRightX = wWidth - marginSide;
    bottomLeftY = bottomRightY = wHeight - marginSide;
    centerX = wWidth/2;
    centerY = (bottomLeftY-topLeftY)/2+marginTop;
    netX = centerX - netWidth/2;
    netY = marginTop - netHeight;
    hitAreaX = centerX - hitAreaWidth/2;
    hitAreaY = marginTop-hitAreaHeight/2;
    icon = document.getElementById('icon');
    icon.style.top = centerY-icon.offsetHeight/2 + "px";
    icon.style.left = centerX-icon.offsetWidth/2 + "px";
    icon.style.visibility = "visible";
    appName = document.getElementById('name');
    appName.style.top = centerY + centerCircleRadius + 16 + "px";
    appName.style.visibility = "visible";
    info = document.getElementById('info');

    canvasField = document.getElementById('canvasField');
    ctx = canvasField.getContext('2d');
    canvasField.width = wWidth;
    canvasField.height = wHeight;
    drawField();
    //gameInterval = setInterval(frame, 40);

}

function drawField() {
    //info.innerHTML = "drawing";
    ctx.clearRect(0, 0, wWidth, wWidth);

    // DRAWING THE FIELD SIDE LINES
    ctx.lineWidth = lineWidth;
    ctx.lineCap = "square";
    ctx.beginPath();
    ctx.moveTo(topLeftX, topLeftY);
    ctx.lineTo(topRightX, topRightY);
    ctx.lineTo(bottomRightX, bottomRightY);
    ctx.lineTo(bottomLeftX, bottomLeftY);
    ctx.lineTo(topLeftX, topLeftY);
    ctx.strokeStyle = lineColor;
    ctx.stroke();

    //DRAW LEFT CENTRAL LINE
    ctx.beginPath();
    ctx.moveTo(marginSide, centerY);
    ctx.lineTo(centerX-centerCircleRadius, centerY);
    ctx.stroke();

    //DRAW RIGHT CENTRAL LINE
    ctx.beginPath();
    ctx.moveTo(centerX+centerCircleRadius, centerY)
    ctx.lineTo(wWidth-marginSide, centerY);
    ctx.stroke();

    //DRAW CENTRAL CIRCLE
    ctx.beginPath();
    ctx.arc(centerX, centerY, centerCircleRadius, 0, Math.PI * 2);
    ctx.fillStyle = "rgba(180,255,0,0.1)";
    ctx.fill();
    ctx.stroke();

    //DRAW HIT AREA
    ctx.beginPath();
    //ctx.fillStyle = '#F7CA18';
    ctx.fillRect(hitAreaX, hitAreaY, hitAreaWidth, hitAreaHeight);
    ctx.closePath();

    //DRAW NET
    netImg = new Image();
    netImg.onload = function(){
        ctx.drawImage(netImg, netX, netY);
    };
    netImg.src = 'images/net.png';

    //DRAW BARS
    ctx.lineWidth = lineWidth/2;
    ctx.beginPath();
    ctx.moveTo(netX, marginTop);
    ctx.lineTo(netX, netY);
    ctx.lineTo(netX+netWidth, netY);
    ctx.lineTo(netX+netWidth, marginTop);
    ctx.stroke();

}