jquerymobilephonegap应用程序中的画布加倍

canvas doubling in jquery mobile phonegap app

本文关键字：布加倍 应用程序 jquerymobilephonegap      更新时间：2023-09-26

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

git->

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

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

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

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

我正在使用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();
    });

})；

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

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

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

画布效果不错，但我一打字，背景中就有另一块重复的画布。。它是一个位偏移

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

并在键入以下内容后将其显示在画布上：http://i61.tinypic.com/35aj8k5.png

注意到另一块画布从后面窥视。。

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

问题出在哪里？我该如何解决这个问题？

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

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