Javascript jquery mobile phonegap应用程序中的画布加倍

因此，我在build.phonegap网站上安装了git和应用程序

git->

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

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

我正在使用jquery手机

我是这样做的：

    #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();

    });

#容器{
位置：相对位置；
}
#我的画布{
边框：2倍纯红；
位置：绝对位置；
宽度：100%；
}
$（文档）.ready（函数（）{
var context2=$（“#myCanvas”）[0].getContext（'2d'）；
$（#myCanvas，#container”）.height（（3*window.innerWidth）/4）；
context2.fillStyle=“#0000ff”；
fillRect（0,0，context2.canvas.width，context2.canvas.height）；
$（“#toptext”）。在（“键控”，函数（）上{
//保存填充矩形的蓝色样式
context2.save（）；
var topTxt=$（this.val（）；
//清除矩形
context2.clearRect（0,0，context2.canvas.width，context2.canvas.height）；
//再次绘制画布以获得新的框架
fillRect（0,0，context2.canvas.width，context2.canvas.height）；
//将填充样式更改为白色
context2.fillStyle=“#ffffff”；
context2.fillText（topTxt，50,50100100）；
//
context2.restore（）；
});

}))

因此，基本上，每次按键都会重新绘制画布，整个文本都会打印在画布上

它在我所有的浏览器中都能正常工作

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

画布可以很好地工作，但只要我一打字，背景中就会有另一个重复的画布。它有点偏移

这是键入任何内容之前的画布：

输入以下内容后，它将显示在画布上：

注意另一张画布从后面偷看

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

问题是什么？

---

如何解决这个问题？

在Android上也有同样的问题，溢出：隐藏在容器元素上修复了我的问题。但我不太清楚为什么这会有帮助

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

---

是的，谢谢它工作了…但现在我有另一个问题canvas textFill（）maxwidth也不工作？？不知道为什么..这里有一个链接指向我的问题try

overflow:auto

，您不应该有其他问题。