Javascript 触摸屏<；帆布>；对于不在触摸屏设备上工作的签名

画布签名可用于鼠标，但不能用于移动设备。我错过了什么

当我在电脑上使用画布时，鼠标绘制功能运行良好，但当我通过手机打开文件时，签名板不起作用。我已经查看了我的代码，但我无法确定问题所在。有什么想法吗

HTML：

<!--The Signature Pad & Clear Button-->

<canvas id="sketchpad" width="500" height="200" style="background-color:#C4C4C4"></canvas>

<button type="button" value="Clear Sketchpad" id="clearbutton" onclick="clearCanvas(canvas,ctx);">Clear</button>

清楚的

JavaScript：

<script type="text/javascript">

// Variables for referencing the canvas and 2dcanvas context

var canvas,ctx;

// Variables to keep track of the mouse position and left-button status 

var mouseX,mouseY,mouseDown=0;

// Variables to keep track of the touch position

var touchX,touchY;

// Draws a dot at a specific position on the supplied canvas name

// Parameters are: A canvas context, the x position, the y position, the size of the dot

function drawDot(ctx,x,y,size) {

    // Let's use black by setting RGB values to 0, and 255 alpha (completely opaque)

    r=0; g=0; b=0; a=255;

    // Select a fill style

    ctx.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")";

    // Draw a filled circle

    ctx.beginPath();

    ctx.arc(x, y, size, 0, Math.PI*2, true); 

    ctx.closePath();

    ctx.fill();
} 

// Clear the canvas context using the canvas width and height

function clearCanvas(canvas,ctx) {

    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

// Keep track of the mouse button being pressed and draw a dot at current location

function sketchpad_mouseDown() {

    mouseDown=1;

    drawDot(ctx,mouseX,mouseY,4);
}

// Keep track of the mouse button being released

function sketchpad_mouseUp() {

    mouseDown=0;
}

// Kepp track of the mouse position and draw a dot if mouse button is currently pressed

function sketchpad_mouseMove(e) { 

    // Update the mouse co-ordinates when moved

    getMousePos(e);

    // Draw a dot if the mouse button is currently being pressed

    if (mouseDown==1) {

        drawDot(ctx,mouseX,mouseY,4);
    }
}

// Get the current mouse position relative to the top-left of the canvas

function getMousePos(e) {
    if (!e)
        var e = event;

    if (e.offsetX) {
        mouseX = e.offsetX;
        mouseY = e.offsetY;
    }
    else if (e.layerX) {
        mouseX = e.layerX;
        mouseY = e.layerY;
    }
 }

// Draw something when a touch start is detected

function sketchpad_touchStart() {

    // Update the touch co-ordinates

    getTouchPos();

    drawDot(ctx,touchX,touchY,4);

    // Prevents an additional mousedown event being triggered

    event.preventDefault();
}

// Draw something and prevent the default scrolling when touch movement is detected

function sketchpad_touchMove(e) { 

    // Update the touch co-ordinates

    getTouchPos(e);

    // During a touchmove event, unlike a mousemove event, we don't need to check if the touch is engaged, since there will always be contact with the screen by definition.

    drawDot(ctx,touchX,touchY,4); 

    // Prevent a scrolling action as a result of this touchmove triggering.

    event.preventDefault();
}

// Get the touch position relative to the top-left of the canvas

// When we get the raw values of pageX and pageY below, they take into account the scrolling on the page

// but not the position relative to our target div. We'll adjust them using "target.offsetLeft" and

// "target.offsetTop" to get the correct values in relation to the top left of the canvas.

function getTouchPos(e) {

    if (!e)

        var e = event;


    if(e.touches) {

        if (e.touches.length == 1) { // Only deal with one finger

            var touch = e.touches[0]; // Get the information for finger #1

            touchX=touch.pageX-touch.target.offsetLeft;

            touchY=touch.pageY-touch.target.offsetTop;
        }
    }
}


// Set-up the canvas and add our event handlers after the page has loaded

function init() {

    // Get the specific canvas element from the HTML document

    canvas = document.getElementById('sketchpad');

    // If the browser supports the canvas tag, get the 2d drawing context for this canvas

    if (canvas.getContext)

        ctx = canvas.getContext('2d');

    // Check that we have a valid context to draw on/with before adding event handlers

    if (ctx) {

        // React to mouse events on the canvas, and mouseup on the entire document

        canvas.addEventListener('mousedown', sketchpad_mouseDown, false);

        canvas.addEventListener('mousemove', sketchpad_mouseMove, false);

        window.addEventListener('mouseup', sketchpad_mouseUp, false);

        // React to touch events on the canvas

        canvas.addEventListener('touchstart', sketchpad_touchStart, false);

        canvas.addEventListener('touchmove', sketchpad_touchMove, false);
    }
}
</script>

//用于引用画布和2dcanvas上下文的变量
var画布，ctx；
//用于跟踪鼠标位置和左键状态的变量
var mouseX，mouseY，mouseDown=0；
//用于跟踪触摸位置的变量
var touchX，touchY；
//在提供的画布名称上的特定位置绘制点
//参数包括：画布上下文、x位置、y位置、点的大小
函数drawDot（ctx、x、y、大小）{
//让我们通过将RGB值设置为0和255 alpha（完全不透明）来使用黑色
r=0；g=0；b=0；a=255；
//选择填充样式
ctx.fillStyle=“rgba（“+r+”、“+g+”、“+b+”、“+（a/255）+”）；
//画一个圆
ctx.beginPath（）；
弧（x，y，大小，0，数学π*2，真）；
ctx.closePath（）；
ctx.fill（）；
} 
//使用画布宽度和高度清除画布上下文
函数clearCanvas（canvas，ctx）{
clearRect（0，0，canvas.width，canvas.height）；
}
//保持鼠标按钮被按下的轨迹，并在当前位置绘制一个点
函数sketchpad_mouseDown（）{
mouseDown=1；
drawDot（ctx、mouseX、mouseY、4）；
}
//跟踪正在释放的鼠标按钮
函数sketchpad_mouseUp（）{
mouseDown=0；
}
//Kepp跟踪鼠标位置，如果当前按下鼠标按钮，则绘制一个点
函数画板\鼠标移动（e）{
//移动时更新鼠标坐标
getMousePos（e）；
//如果当前正在按下鼠标按钮，则绘制一个点
if（mouseDown==1）{
drawDot（ctx、mouseX、mouseY、4）；
}
}
//获取相对于画布左上角的当前鼠标位置
函数getMousePos（e）{
如果（！e）
var e=事件；
如果（e.offsetX）{
mouseX=e.offsetX；
mouseY=e.offsetY；
}
否则如果（如layerX）{
mouseX=e.layerX；
mouseY=e.layerY；
}
}
//当检测到触控启动时绘制某物
函数sketchpad_touchStart（）{
//更新触摸坐标
getTouchPos（）；
drawDot（ctx、touchX、touchY、4）；
//防止触发另一个mousedown事件
event.preventDefault（）；
}
//在检测到触摸移动时，绘制一些内容并防止默认滚动
函数画板_touch move（e）{
//更新触摸坐标
getTouchPos（e）；
//在touchmove事件中，与mousemove事件不同，我们不需要检查触摸是否已启动，因为根据定义，触摸屏将始终保持接触。
drawDot（ctx、touchX、touchY、4）；
//防止此touchmove触发导致滚动动作。
event.preventDefault（）；
}
//获取相对于画布左上角的触摸位置
//当我们在下面得到pageX和pageY的原始值时，它们会考虑页面上的滚动
//但不是相对于目标div的位置。我们将使用“target.offsetLeft”和
//“target.offsetTop”以获取与画布左上角相关的正确值。
函数getTouchPos（e）{
如果（！e）
var e=事件；
如果（如图所示）{
如果（e.touchs.length==1）{//只处理一个手指
var touch=e.touch[0]；//获取finger#1的信息
touchX=touch.pageX-touch.target.offsetLeft；
touchY=touch.pageY-touch.target.offsetop；
}
}
}
//设置画布并在页面加载后添加事件处理程序
函数init（）{
//从HTML文档中获取特定的画布元素
canvas=document.getElementById（'sketchpad'）；
//如果浏览器支持画布标记，请获取此画布的二维图形上下文
if（canvas.getContext）
ctx=canvas.getContext（'2d'）；
//在添加事件处理程序之前，请检查是否有一个有效的上下文可供使用
如果（ctx）{
//对画布上的鼠标事件做出反应，并对整个文档执行鼠标操作
canvas.addEventListener（'mousedown'，sketchpad_mousedown，false）；
canvas.addEventListener（'mousemove'，sketchpad_mousemove，false）；
window.addEventListener（'mouseup'，sketchpad_mouseup，false）；
//对画布上的触摸事件做出反应
canvas.addEventListener（'touchstart'，sketchpad_touchstart，false）；
canvas.addEventListener（'touchmove'，sketchpad_touchmove，false）；
}
}

我已经修复了这个问题，从画布的父div中删除了“position:relative；”。

什么手机浏览器？铬？游猎？艾美？所有的？它不是在所有的浏览器上都能工作。