在畫布上繪圖不適用於傳感器（手機）HTML/JavaScript

Question

我制作了可以在上面繪制的畫布，但是當我將網站大小調整為移動大小時，它不起作用。 我的代碼只適用於鼠標。 有沒有辦法讓它也可以在移動設備上運行。 這是我的代碼：

const points = [];
const mouse = { x: 0, y: 0, button: false }
const ctx = canvas.getContext("2d");
canvas.addEventListener("mousemove", mouseEvents);
canvas.addEventListener("mousedown", mouseEvents);
canvas.addEventListener("mouseup", mouseEvents);
var x = "black",
    y = 2;
function mouseEvents(e) {
    mouse.x = e.pageX - 1;
    mouse.y = e.pageY - 1;
    const lb = mouse.button;
    mouse.button = e.type === "mousedown" ? true : e.type === "mouseup" ? false : mouse.button;
    if (mouse.button) {
        if (!lb) { points.length = 0 }
            points.push({ x: mouse.x, y: mouse.y });
            drawPoints();
    }
}

function drawPoints() {
    ctx.strokeStyle = x;
    ctx.lineWidth = y;
    ctx.lineCap = "round";
    ctx.lineJoin = "round";
    ctx.beginPath();
    if (mode == "pen") {
        ctx.globalCompositeOperation = "source-over";
        for (const p of points) { ctx.lineTo(p.x, p.y); }
        ctx.stroke();
    } else {
        ctx.globalCompositeOperation = "destination-out";
        ctx.arc(mouse.x, mouse.y, 8, 0, Math.PI * 2, false);
        ctx.stroke();
        ctx.fill();
    }
}

Answer 1

將"mousemove"替換為"pointermove"等以涵蓋鼠標和觸摸輸入。 對於上述事件，您可能需要另外調用e.StopPropagation()以防止在移動設備上滾動頁面。