Javascript canvas在桌面上工作得很好，但在移动设备上却不行'；行不通_Javascript_Jquery_Canvas

Javascript canvas在桌面上工作得很好，但在移动设备上却不行'；行不通

javascript jquery canvas

Javascript canvas在桌面上工作得很好，但在移动设备上却不行'；行不通,javascript,jquery,canvas,Javascript,Jquery,Canvas,我有画布功能，在桌面上工作得很好，但在移动设备上它工作得很奇怪或者不工作在移动设备上，它每20秒工作一次，当你们触摸手指的开始50px时，只会画一条线这是我的密码： var canvasDiv = document.getElementById('canvasDiv'); var canvas = document.createElement('canvas'); canvas.setAttribute('id', 'canvas'); canvasDiv.appendChild(canva

我有画布功能，在桌面上工作得很好，但在移动设备上它工作得很奇怪或者不工作

在移动设备上，它每20秒工作一次，当你们触摸手指的开始50px时，只会画一条线

这是我的密码：

var canvasDiv = document.getElementById('canvasDiv');
var canvas = document.createElement('canvas');
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
$("#canvas").attr('height', $("#canvasDiv").outerHeight());
$("#canvas").attr('width', $("#canvasDiv").width());
if (typeof G_vmlCanvasManager != 'undefined') {
    canvas = G_vmlCanvasManager.initElement(canvas);
}

context = canvas.getContext("2d");
var blueprint_background = new Image();
blueprint_background.src = srctesting;
blueprint_background.crossOrigin="anonymous";
blueprint_background.onload = function(){
    var pattern = context.createPattern(this, "no-repeat");
    context.fillStyle = pattern;
    context.rect(0,0,$("#canvasDiv").width(),$("#canvasDiv").outerHeight());
    context.fill();
};

// console.log(blueprint_background)
$('#canvas').mousedown(function(e) {
    var offset = $(this).offset()
    var mouseX = e.pageX - this.offsetLeft;
    var mouseY = e.pageY - this.offsetTop;

    paint = true;
    addClick(e.pageX - offset.left, e.pageY - offset.top);
    redraw();
});

$('#canvas').mousemove(function(e) {
    if (paint) {
        var offset = $(this).offset()
        //addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
        addClick(e.pageX - offset.left, e.pageY - offset.top, true);
        // console.log(e.pageX, offset.left, e.pageY, offset.top);
        redraw();
    }
});

$('#canvas').mouseup(function(e) {
    paint = false;
});

$('#canvas').mouseleave(function(e) {
    paint = false;
});

var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;

function addClick(x, y, dragging) {
    clickX.push(x);
    clickY.push(y);
    clickDrag.push(dragging);
}

$("#reset-btn").click(function() {
    context.clearRect(0, 0, window.innerWidth, window.innerWidth);
    clickX = [];
    clickY = [];
    clickDrag = [];
});

$(document).on('click', '#btn-save', function() {
    var mycanvas = document.getElementById('canvas');
    var img = mycanvas.toDataURL("image/png");
    anchor = $("#signature");
    anchor.val(img);
    $("#signatureform").submit(); 
});


var drawing = false;
var mousePos = {
    x: 0,
    y: 0
};
var lastPos = mousePos;

canvas.addEventListener("touchstart", function(e) {
    mousePos = getTouchPos(canvas, e);
    var touch = e.touches[0];
    var mouseEvent = new MouseEvent("mousedown", {
        clientX: touch.clientX,
        clientY: touch.clientY
    });
    canvas.dispatchEvent(mouseEvent);
}, false);


canvas.addEventListener("touchend", function(e) {
    var mouseEvent = new MouseEvent("mouseup", {});
    canvas.dispatchEvent(mouseEvent);
}, false);


canvas.addEventListener("touchmove", function(e) {

    var touch = e.touches[0];
    var offset = $('#canvas').offset();
    var mouseEvent = new MouseEvent("mousemove", {
        clientX: touch.clientX,
        clientY: touch.clientY
    });
    canvas.dispatchEvent(mouseEvent);
}, false);



// Get the position of a touch relative to the canvas
function getTouchPos(canvasDiv, touchEvent) {
    var rect = canvasDiv.getBoundingClientRect();
    return {
        x: touchEvent.touches[0].clientX - rect.left,
        y: touchEvent.touches[0].clientY - rect.top
    };
}


var elem = document.getElementById("canvas");

var defaultPrevent = function(e) {
    e.preventDefault();
}
elem.addEventListener("touchstart", defaultPrevent);
elem.addEventListener("touchmove", defaultPrevent);


function redraw() {
    //
    lastPos = mousePos;
    for (var i = 0; i < clickX.length; i++) {
        context.beginPath();
        if (clickDrag[i] && i) {
            context.moveTo(clickX[i - 1], clickY[i - 1]);
        } else {
            context.moveTo(clickX[i] - 1, clickY[i]);
        }
        context.lineTo(clickX[i], clickY[i]);
        context.closePath();
        context.stroke();
    }
}

正如你所看到的，我为手机添加了活动。我遗漏了什么吗？

var touch=e.changedtouch[0]

可能会更好。。？您还应该在引用其属性之前检查对象是否存在。Hello@Teemu谢谢您的建议，但这并没有解决问题啊，我的错，您需要从

e.changedTouches

中获取最后一个索引，而不是第一个索引。miight在

e.touchs

@Teemu yes中添加了var touch=e.touch[e.touch.length-1]，但仍然没有改进，在画布和触摸设备上从未使用过。在Android和Chrome的FF上，在Galaxy S6上都能很好地工作。