在HTML5网页上接受触笔输入是否可行？

Question

我希望创建一个网页，用户可以使用触控笔签名（就像签收包裹时一样）。有人知道这是否可能吗？我不确定从哪里入手，但猜测可能需要使用canvas元素和JavaScript？

- Pattle

Answer 1

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

您可以查看this tutorial了解如何使用<canvas>元素创建简单的绘图应用程序。

要查看哪些浏览器支持canvas，请参见this page。

- kamituel

Answer 2

如果您需要专门支持触笔功能，那么您需要支持超出典型鼠标x、y坐标的特殊功能。

目前我所知道的仅有支持触笔输入的是Wacom Web插件/API。它支持这些功能，如触笔压感、触笔角度和网络多点触控。

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

HTML5的“pointerevents” API将来可以支持所有类型平板电脑的压感、角度和触摸事件。

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

- eriksssss

Answer 3

并没有专门支持压感或方向等功能的触控笔API。但在大多数情况下，触摸笔可以像鼠标一样使用。这种情况下，它将创建类似于mousedown、mousemove和mouseup的常规鼠标事件。您可以为这些事件添加事件处理程序，并适当地对其进行反应。

- Philipp

Answer 4

这里提供一个简单的示例，使用“canvas”和指针事件创建一个自包含URL的画布页面，可以用触笔进行绘制。 （我使用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>

将其粘贴到您的浏览器地址栏中，并尝试使用您的笔画图。

- Manni-de