我有一个 HTML5 画布，我正在尝试在上面画云。在 Ripple 中进行测试时，它在 Chrome 中运行时运行良好，在模拟器中运行时运行良好，但在实际设备（10 英寸三星 Galaxy Tab）上运行时失败。
出于测试目的，我注释掉了几乎所有代码，并在整个画布上绘制了一个彩色矩形，这样我就可以看到画布的边框。我想在屏幕左上角附近看到一个黄色矩形，左侧有一点空白（大约 15 像素），标题下方有一些空白（从矩形顶部到顶部的总距离）窗口为 42 像素）。在位置 (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;
}
我在这里不知所措，任何帮助将不胜感激。