キャンバスの描画をモバイルで行うにはどうすればいいですか

Question

私のキャンバスの描画インターフェイスはデスクトップ上では完全に動作しますが、iPhoneでは動作しません。

私がドローしようとすると、親指が行くところにドットができます。私は私の親指をドラッグすると、行が含まれていないと、ページがスクロールし続けて...

コード：

var clearButton = document.getElementById('doodle-bin'); 
 
var canvascontainer = document.getElementById('doodle-canvas-container'); 
 
var canvas = document.getElementById('doodle-canvas'); 
 
var context = canvas.getContext('2d'); 
 
var radius = (document.getElementById('doodle-canvas-container').clientWidth + document.getElementById('doodle-canvas-container').clientHeight)/150; 
 
var dragging = false; 
 

 
function getMousePosition(e) { 
 
    var mouseX = e.offsetX * canvas.width/canvas.clientWidth | 0; 
 
    var mouseY = e.offsetY * canvas.height/canvas.clientHeight | 0; 
 
    return {x: mouseX, y: mouseY}; 
 
} 
 

 
context.mozImageSmoothingEnabled = false; 
 
context.imageSmoothingEnabled = false; 
 

 
canvas.width = 1280; 
 
canvas.height = 720; 
 
canvas.style.width = '100%'; 
 
canvas.style.height = '100%'; 
 

 
/* CLEAR CANVAS */ 
 
function clearCanvas() { 
 
    context.clearRect(0, 0, canvas.width, canvas.height); 
 
} 
 

 
clearButton.addEventListener('click', clearCanvas); 
 

 

 
var putPoint = function (e) { 
 
    if (dragging) { 
 
     context.lineTo(getMousePosition(e).x, getMousePosition(e).y); 
 
     context.lineWidth = radius * 2; 
 
     context.stroke(); 
 
     context.beginPath(); 
 
     context.arc(getMousePosition(e).x, getMousePosition(e).y, radius, 0, Math.PI * 2); 
 
     context.fill(); 
 
     context.beginPath(); 
 
     context.moveTo(getMousePosition(e).x, getMousePosition(e).y); 
 
    } 
 
}; 
 

 
var engage = function (e) { 
 
    dragging = true; 
 
    putPoint(e); 
 
}; 
 
var disengage = function() { 
 
    dragging = false; 
 
    context.beginPath(); 
 
}; 
 

 
canvas.addEventListener('mousedown', engage); 
 
canvas.addEventListener('mousemove', putPoint); 
 
canvas.addEventListener('mouseup', disengage); 
 
document.addEventListener('mouseup', disengage); 
 
canvas.addEventListener('contextmenu', disengage); 
 

 
canvas.addEventListener('touchstart', engage, false); 
 
canvas.addEventListener('touchmove', putPoint, false); 
 
canvas.addEventListener('touchend', disengage, false);

任意の助けいただければ幸いです！ありがとう

Answer 1

putPoint機能では、デフォルトのイベントと伝播をキャンセルします。

var putPoint = function (e) { 
    e.preventDefault(); 
    e.stopPropagation(); 

    if (dragging) { 
    .... 

次に、タッチ座標をマウス座標に変換する方法を処理するには、Using Touch Events with the HTML5 Canvasを参照してください。

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