javascript - jquery mobile Phonegap应用程序中的canvas加倍

Question

所以我在 build.phonegap 网站上设置了一个 git 和一个应用程序

git->

https://github.com/prantikv/image-typer

下载应用程序的链接:->

https://build.phonegap.com/apps/1171702/download/android/?qr_key=sX_SB4ptD87r8yfvQey2

该应用程序很简单，它用蓝色填充 Canvas ，并允许用户从输入框在 Canvas 上键入文本。

我正在使用 jquery mobile..!!!

这是我的做法:

    #container{
    position: relative;
  }
#myCanvas{
    border: 2px solid red;
    position: absolute;
    width: 100%;
}

<div id="container">
        <canvas id="myCanvas"></canvas>
</div>

$(document).ready(function(){
 var context2= $("#myCanvas")[0].getContext('2d');
 $("#myCanvas,#container").height((3*window.innerWidth)/4);
    context2.fillStyle = "#0000ff"; 
    context2.fillRect(0,0,context2.canvas.width,context2.canvas.height);

    $("#toptext").on("keyup",function(){
        //save blue style of fill rectangle
        context2.save();
        var topTxt=$(this).val();
        //clear the rectangle
        context2.clearRect (0,0,context2.canvas.width,context2.canvas.height);
        //draw the canvas again to get fresh frame
        context2.fillRect(0,0,context2.canvas.width,context2.canvas.height);
        //change fill style to white
        context2.fillStyle = "#ffffff"; 
        context2.fillText(topTxt,50,50,100,100);
        //
        context2.restore();

    });

});

所以本质上，每次击键都会重新绘制 Canvas ，并且整个文本都会打印在 Canvas 上。

它在我检查过的所有浏览器中运行良好..

但是当我通过云服务将其转换为phonegap应用程序时，我遇到了一些问题，这非常令人沮丧。

Canvas 工作正常，但一旦我输入，背景中就会出现另一个重复的 Canvas ..并且它有点偏移

这是输入任何内容之前的 Canvas : http://i60.tinypic.com/11v00g9.png

这是输入后的 Canvas : http://i61.tinypic.com/35aj8k5.png

注意另一 block Canvas 从后面偷看..

它不是任何其他元素，它是同一个 Canvas ，只是它的另一个标识..文本显示在两个 Canvas 上..

问题是什么？ 我该如何解决这个问题？

Answer 1

在 Android 上也有同样的问题，容器元素上的溢出:隐藏解决了我的问题。但不太确定为什么这有帮助。

#container {
    /* This fixes the double draw on Android 4.1.x and 4.2.x */
    overflow: hidden;
}