Canvas创建自己的副本

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

必须在画布上设置'position：absolute'（在div中）并修复了这个问题。

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