如何使用手写笔在 HTML5 画布上绘图

我使用 onmousedown、onmousemove 和 onmouseup 事件在 HTML5 画布对象上使用 JavaScript 进行绘制。一切正常。

现在我想用手写笔替换鼠标（Wacom Intuos Pro） 因此我用 onpointerdown、onpointerup 和 onpointermove 替换了鼠标事件。

但现在，如果我触摸并移动笔，我不会收到任何 onpointermove 事件，而是拖动整个页面。通过将 html, body {overflow: hide} 添加到 HTML 构造中，我可以防止这种行为，但我仍然没有收到任何 onpointermove 事件。只有当笔位于平板电脑上方时我才会得到这些。

有人知道如何解决它吗？

目前，这是我使用的概念（但不起作用）：

$(function() {
   var el=document.getElementById("myDraw");
    el.onpointerdown = down_handler;
    el.onpointerup = up_handler;
    el.onpointermove = move_handler;
    ctx = el.getContext("2d");
    ctx.canvas.width  = window.innerWidth*0.75;
    ctx.canvas.height = window.innerHeight*0.75;
});



function move_handler(ev) 
{ 
if (onTrack>0)
{
    var xPosition = ev.clientX-getPosition(document.getElementById("myDraw")).x;
    var yPosition = ev.clientY-getPosition(document.getElementById("myDraw")).y;
    ctx.beginPath();
    ctx.lineWidth=10*ev.pressure;
    ctx.moveTo(lastX,lastY);
    ctx.lineTo(xPosition,yPosition);
    ctx.stroke();     
    lastX = xPosition; 
    lastY = yPosition;
}
}

function down_handler(ev) 
{
    var xPosition = ev.clientX-getPosition(document.getElementById("myDraw")).x;
    var yPosition = ev.clientY-getPosition(document.getElementById("myDraw")).y;
    ctx.beginPath();
    ctx.arc(xPosition, yPosition, 5, 0, 2 * Math.PI);
    ctx.stroke();     
    startX = xPosition;
    startY = yPosition;
    lastX = xPosition;
    lastY = yPosition;
    onTrack=1;
    var el=document.getElementById("myRemoteDraw");
   el.setPointerCapture(ev.pointerId);
    console.log('pointer down '+ev.pointerId);
}


function up_handler(ev) 
{
    var xPosition = ev.clientX-getPosition(document.getElementById("myDraw")).x;
    var yPosition = ev.clientY-getPosition(document.getElementById("myDraw")).y;
    ctx.beginPath();
    ctx.rect(xPosition-5, yPosition-5, 10, 10);
    ctx.stroke();     
    onTrack = 0;
    var el=document.getElementById("myRemoteDraw");
    el.releasePointerCapture(ev.pointerId);
    console.log('pointer up '+ev.pointerId);
}

这个 CSS 应该可以帮助你：

<style>
    /* Disable intrinsic user agent touch behaviors (such as panning or zooming) */
    canvas {
      touch-action: none;
    }
</style>

或者在 JavaScript 中：

ctx.canvas.style.touchAction = "none";

更多详情来自这个关于“触摸动作”的链接 https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action and 此链接中有关输入的一些一般信息 https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events:

touch-action CSS 属性用于指定浏览器是否应将其默认（本机）触摸行为（例如缩放或平移）应用于某个区域。此属性可应用于除以下元素之外的所有元素：非替换内联元素、表行、行组、表列和列组。

auto 值表示浏览器可以自由应用其默认触摸行为（到指定区域），none 值则禁用该区域的浏览器默认触摸行为。 pan-x 和 pan-y 值分别表示从指定区域开始的触摸仅适用于水平和垂直滚动。值操作意味着浏览器可能会认为在元素上开始的触摸仅用于滚动和缩放。