画布创建自己的副本答案

【问题标题】：Canvas creates copy of itself画布创建自己的副本
【发布时间】：2013-11-13 00:27:15
【问题描述】：

我有一个 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;
}

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

【问题讨论】：

仅供参考，HTML canvas 和 android 不能很好地配合。最近，我一直受到与此相关的错误的轰炸。可能是，您正遭受画布复制错误的困扰。检查这个问题code.google.com/p/android/issues/detail?id=35474
感谢链接，今晚晚些时候将尝试“修复”。

标签： jquery-mobile cordova html5-canvas

【解决方案1】：

必须在画布（在 div 内）上设置“位置：绝对”，这解决了问题。

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

【讨论】：