画布创建其自身的副本

Question

我有一个HTML5画布，试图在上面画云。 当在Ripple中进行测试时在Chrome中运行时以及在模拟器中运行时，它运行良好，但在实际设备（10英寸Samsung Galaxy Tab）上运行时，它运行失败。

为了进行测试，我注释掉了几乎所有代码，并在整个画布上绘制了一个彩色矩形，以便可以看到画布的边框。 我想在屏幕的左上角附近看到一个黄色矩形，左侧有一些空白（大约15px），标题下方有一些空白（从矩形顶部到顶部的总距离）窗口是42px）。 在位置（15,42）处调用矩形的左上角。

但是，数位板会绘制矩形，但也会从屏幕的左上角-位置（0,0）开始绘制其自身的副本。 “正确”矩形重叠并显示在“错误”矩形的顶部。

这是我想要的图像。

这是HTML：

<div data-role="page" id="makeClouds">
    <div data-role="header">
        <a href="#menu" data-role="button" data-inline="true">Menu</a>
        <h1>Make clouds</h1>
        <a href="#journal" data-role="button" data-inline="true">Journal</a>
    </div>
    <div data-role="content">
        <div id="coverageButtons">
            <a href="#" id="decrease" data-role="button" onclick="decreaseCoverage();" data-inline="true">Less clouds</a>
            <a href="#" id="increase" data-role="button" onclick="increaseCoverage();" data-inline="true">More clouds</a>
            <p id="cloudCoverageDisplay"></p>
        </div>
        <div id="canvasDiv">
            <canvas id="canvasClouds">Sorry, your browser is not supported.</canvas>
        </div>
    </div>
</div> 

这是JavaScript：

$(document).delegate("#makeClouds", "pageshow", function() {
console.log("Loading page makeClouds.");
//drawClouds();

var canvas = document.getElementById('canvasClouds');
var context = canvas.getContext('2d');

context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();   
});

这是CSS：

#canvasDiv {
    z-index: 2;
}

#canvasClouds {
    background-color: blue;
    z-index: 20;
}

我不知所措，任何帮助将不胜感激。

Answer 1

不得不在画布上（位于div内）设置“ position：absolute”，这解决了这个问题。

已通过@AnupChaudhari链接中的详细信息修复。 https://code.google.com/p/android/issues/detail?id=35474