Javascript 使用苹果铅笔时,如何从HTML画布绘制或获取指针坐标?

Javascript 使用苹果铅笔时,如何从HTML画布绘制或获取指针坐标?,javascript,jquery,css,canvas,html5-canvas,Javascript,Jquery,Css,Canvas,Html5 Canvas,我正在使用我的鼠标和我的Microsoft surface手写笔在html画布上获取鼠标事件,如鼠标下、上、移动和绘图。现在我想用ipad pro铅笔试试,我发现当铅笔放在画布区域时,画布无法识别铅笔,因此我无法进行任何绘图或活动。是否有任何我应该使用的特定JavaScript库或任何其他可用的解决方案来使用apple pencil with html canvas?apple pencil使用的是触摸事件,而不是html中的鼠标事件。您可以将画布设置为侦听触摸事件,然后检查其touchType

我正在使用我的鼠标和我的Microsoft surface手写笔在html画布上获取鼠标事件,如鼠标下、上、移动和绘图。现在我想用ipad pro铅笔试试,我发现当铅笔放在画布区域时,画布无法识别铅笔,因此我无法进行任何绘图或活动。是否有任何我应该使用的特定JavaScript库或任何其他可用的解决方案来使用apple pencil with html canvas?

apple pencil使用的是
触摸
事件,而不是html中的
鼠标
事件。您可以将画布设置为侦听触摸事件,然后检查其
touchType
中的触笔。然后,您可以从特定的触摸中获得clientX和clientY来进行绘图

document.getElementById('mycanvas').addEventListener('touchmove', function(event){
    for(var i = 0; i < event.touches.length; i++){
         if(event.touches[i].touchType === "stylus"){
             console.log("x coordinate: " + event.touches[i].clientX);
             console.log("y coordinate: " + event.touches[i].clientY);
         }
    }
});
document.getElementById('mycanvas').addEventListener('touchmove',函数(事件){
对于(变量i=0;i
有关更多详细信息,请参阅触摸事件的。另外,请参阅获取Apple Pencil touch事件的详细信息


如果你正在寻找一个可以让你在苹果铅笔和曲面笔之间轻松移动的库,你应该看看。这是一款非常好用的设备。

我自己从未尝试过这种设备,但我想如果是你的手指或铅笔之类的东西,它对操作系统没有什么影响。因此,您是否尝试聆听触摸事件?