如何收集onMouse和onTouch以便画布可以在鼠标和ipad上使用？答案

【问题标题】：How to gather onMouse and onTouch so that the canvas can be use on mouse and ipad?如何收集onMouse和onTouch以便画布可以在鼠标和ipad上使用？
【发布时间】：2012-06-21 05:56:44
【问题描述】：

我在混淆如何在我的编码中放置 ontouch 时遇到了问题，因为我希望它在 ipad 上运行，下面是我的代码

    <script language="javascript">
function sig1()
{
    if(sig == null)
    {
        xclear('myCanvas');
    }
}

清除画布线条的代码

<body id="main_body" class="no_guidelines" onload="sig1()" onmouseup="bodyonmouseup">

让画布有填充样式的颜色和功能

<canvas border=1 id="myCanvas" height=200 width=400 onmousedown="onmousedown()" onmouseup="onmouseup()" onmousemove="onmousemove()">Your browser does not support the application</canvas>

可以像签名一样画线的画布

var sig = null;
      var ele;
      function bodyonmouseup(e)
{
    var ele;
    ele = document.getElementById('myCanvas');
    ele.isDown = false;
}
function onmousedown(e)
{
    var ele,p;
    if (!e) e = window.event;
    ele = (e.srcElement);
    if (! ele) ele = e.target;
    ele.isDown = true; 
    ele.context = ele.getContext("2d");
    ele.context.lineWidth = 1;
    ele.context.beginPath();   
    ele.context.moveTo(e.offsetX,e.offsetY);
    sig.line = new Array();

    p = new Object();
    p.x = e.offsetX;
    p.y = e.offsetY;

    sig.p = p;
    sig.line[sig.line.length] = p;
    sig.lines[sig.lines.length] = sig.line;
}
function onmousemove(e)
{
    var ele,dx,dy,p;
    if (!e) e = window.event;
    ele = (e.srcElement);
    if (! ele) ele = e.target;
    if (! ele.isDown) return;
    ele.context.lineTo(e.offsetX,e.offsetY);
    ele.context.stroke();
    dx = e.offsetX - sig.p.x;
    dy = e.offsetY - sig.p.y;
    if (dx == 0 && dy == 0) return;
    sig.p = new Object();
    sig.p.x = e.offsetX;
    sig.p.y = e.offsetY;
    sig.line[sig.line.length] = sig.p;
}

所以我想知道我是否要同时保留 onMouse 和 ontouch，我如何放置 ontouch 以便可以在 ipad 上绘制画布？请帮忙，很紧急

【问题讨论】：

这里是我的html签名(jsfiddle.net/mvQRm/1)，看看希望大家帮帮我

标签： javascript canvas touch-event onmousemove

【解决方案1】：

使用这个js。您的手指将成为您的鼠标。他们正在将所有触摸事件转换为鼠标事件。

jquery-ui-touch-punch

【讨论】：

谢谢哥们，但我输入这些javascript后仍然可以在ipad或android手机上绘制它
你能用我给出的代码给我一个例子吗？因为它对我不起作用...再次感谢
添加这一行。它会起作用的。我认为您需要将代码放在 jsfiddle.net 上。人们可以很容易地帮助你..
我认为 touch-punch 只是使用 jqery ui，但我只是希望它在画布中起作用。
也许吧。将您的代码放入 jsfiddle。 Stackoverflow 的人喜欢在那里解决 javascript 问题。他们会对这个问题感兴趣。