Javascript 画布元素的双重显示

绘制的线条不仅出现在Canvas元素中，而且会再次显示在页面顶部

这在释放触摸事件时发生

在这里您可以找到源代码和结果（使用PhoneGap和Jquery Mobile）

有人知道这个错误的原因吗？

JavaScript（在包含到jQuery/PhoneGap之后的标题中加载）：

//*********************************************************
//等待Cordova加载
//*********************************************************
文件。添加的监听器（“deviceready”，OnDeviceraddy，false）；
函数ondevicerady（）{
帆布（“aufprallstelleA”，“测试”）；
}
//用于为绘图设置新画布的函数
函数画布（画布、元素）{
//定义画布并调整其大小
宽度=$（窗口）.width（）；
宽度=（宽度/100）*90；
高度=宽度/1.6901408；
$（“#内容”）。宽度（宽度）；
$（“#”+元素）。高度（高度）；
$（“#”+元素）。宽度（宽度）；
var html='这是您可以绘制的de画布字段
'；
$（“#”+元素）.html（html）；
//设置画布
ctx=document.getElementById（canvas.getContext（“2d”）；
ctx.strokeStyle=“红色”；
ctx.lineWidth=5；
//在鼠标或触摸屏上触发绘图的设置
$（“#”+画布）.on（“touchstart”，开始）；
$（“#”+画布）；
}
功能启动（e）{
e=e.原始事件；
x=e.changedTouches[0]。第x-20页；
y=e.changedTouches[0]。页面y-$（此）.position（）.top；
ctx.moveTo（x，y）；
}
功能移动（e）{
e、 预防默认值（）；
e=e.原始事件；
x=e.changedTouches[0]。第x-20页；
y=e.changedTouches[0]。页面y-$（此）.position（）.top；
ctx.lineTo（x，y）；
ctx.stroke（）；
}
函数clearcanvas（id）{
var canvas=document.getElementById（id）；
var context=canvas.getContext（'2d'）；
clearRect（0，0，canvas.width，canvas.height）；
}    

HTML:

<div data-role="page" id="main">
  <div data-role="header" id="header">
    <div id="header_anzeige">
    </div>
  </div>
  <div data-role="content" id="content" >
    <div id="test" style="margin-top:265px;"></div><br>
    Hello, this is JQuery Mobile running in PhoneGap 2
  </div>   
</div> 
copyright
</div>
</div>

您好，我是运行在PhoneGap 2中的JQuery Mobile
版权

ondevicerady

可能被调用两次。您是否尝试过将画布保存在变量中以避免创建两次？请注意，第一个被调用的可能是错误的，因此窗口大小很可能是错误的

var theCanvas;
function onDeviceReady() {
    if(!theCanvas){
        canvas("aufprallstelleA","test");
    }
}

function canvas(canvas, element){
    //define and resize canvas
    width = $(window).width();

    [...]

    $("#"+canvas).on("touchmove", move);
    return $("#"+canvas);
}

---

编辑：我做了一点调查，问题似乎是因为这个活动被叫来了两次。如果您能确认这一点，我们可以寻找一个解决方法。

我已经解决了这个问题，将画布定位为绝对位置，而不是相对位置，正如上面提到的那样。

尝试用一个div包围画布，并将CSS溢出：隐藏应用于此div。

您是否可以将其放入JSFIDLE中，或者在页面加载完毕并且javascript构建了画布元素之后，提供HTML的副本？在我的例子中，我使用了中提到的代码，我只是调整鼠标事件来触摸事件。它在计算机上运行良好，但在cordova应用程序上，画布表面上的绘图会在主页上复制，并移到左上角。。。即使我在没有传递抛出触摸事件的情况下绘制一个静态图形，这个图形也会被复制两次。如果onDeviceReady被调用两次，为什么要在我发出警报（“onDeviceReady”）时进行复制；在中，它不会出现两次？我认为问题是由于getContext返回画布上的指针，以及主屏幕上的指针。。。在phone gap古版上没有问题，而在Cordova的最新版本中，我们可以解决这个问题。但是我找不到解决问题的方法。你能不能从按钮之类的东西而不是从事件中调用ˋcanvas（）`来看看问题是否仍然存在？

var theCanvas;
function onDeviceReady() {
    if(!theCanvas){
        canvas("aufprallstelleA","test");
    }
}

function canvas(canvas, element){
    //define and resize canvas
    width = $(window).width();

    [...]

    $("#"+canvas).on("touchmove", move);
    return $("#"+canvas);
}