是否可以在HTML5网页上接受手写笔输入

Is it possible to accept stylus input on a HTML5 web page

本文关键字：手写笔 输入 网页 HTML5 是否      更新时间：2023-09-26

我想创建一个网页，用户可以在其中使用手写笔书写签名（就像在签收包裹或包裹时一样）。有人知道这是否可能吗？我不确定从哪里开始，但我猜我必须使用元素和javascript？

只要客户端使用的设备支持使用手写笔的触摸输入，这是完全可能的。

您可以看到本教程，了解如何使用<canvas>元素创建一个简单的绘图应用程序。

要查看哪些浏览器支持画布，请参阅此页面。

如果您特别需要手写笔支持，您将需要支持典型鼠标x，y坐标之外的功能。

目前，我所知道的唯一特定于风格的输入是Wacom Web插件/API。这支持手写笔压力、手写笔角度和网络多点触摸等功能。

http://www.wacomeng.com/web/

这里提出了HTML5的"pointerevents"API的未来考虑因素，该API通常支持所有平板电脑类型的压力、角度和触摸事件。

http://www.w3.org/TR/pointerevents/

没有特定于支持压敏或定向等功能的触控笔的API。但在大多数情况下，手写笔可以用作鼠标。在这种情况下，它将创建正常的鼠标事件，如mousedown、mousemove和mouseup。您可以将这些事件的事件处理程序添加到画布中，并对它们做出适当的反应。

这里是一个使用"画布"；和指针事件，以创建允许使用手写笔绘图的画布页面。（它适用于我的Wacom Intuit）：

    data:text/html,<canvas id="v"><style> /* Disable intrinsic user agent touch behaviors (such as panning or zooming) */ canvas { touch-action: none; } </style><script>d=document,d.body.style.margin=0,f=0,c=v.getContext("2d"),v.width=innerWidth,v.height=innerHeight,c.lineWidth=2,x=e=>e.clientX||e.touches[0].clientX,y=e=>e.clientY||e.touches[0].clientY,d.onpointerdown=d.ontouchstart=e=>{f=1,e.preventDefault(),c.moveTo(x(e),y(e)),c.beginPath()},d.onpointermove=d.ontouchmove=e=>{f&&(c.lineTo(x(e),y(e)),c.stroke())},d.onpointerup=d.ontouchend=e=>f=0</script>

将其粘贴到浏览器地址字段中，然后尝试使用手写笔绘制。

相关文章：