Chrome の Touch API に比較的小さな変更が Chrome 39 で行われ、TouchEvent オブジェクトに webkitRotationAngle 属性の動作バージョンが導入されました。Chrome 45（2015 年 7 月のベータ版）では、rotationAngle として接頭辞が削除され、TouchEvent 仕様と Firefox の実装に準拠しています。
rotationAngle は以前から存在していますが、特にモバイル デバイスでタップ操作をより興味深い方法で使用できるため、rotationAngle について説明する価値があります。
技術的には、回転角度は Touch.radiusX と Touch.radiusY で定義される接触領域の楕円の度数（0 ～ 90）です。いいですね。（Android 版 Chrome では、radiusX と radiusY の値が 64 ピクセルに固定されず、画面の接触サイズに応じて変化することが判明しました）。
つまり、
ユーザーの指のサイズ、形状、向きを画面上で正確に表す方法と考えてください。ユーザーは、指先のペン先で画面をタップするだけでなく、警察に指紋を提出するように画面を押すこともあります。rotationAngle がないと、タップ操作の幅と高さのみが取得されます。rotationAngle を使用すると、90 度回転します（0 は垂直、90 は水平）。90 度に限定しているのはなぜですか？90 度以上になると、radiusX と radiusY が変化して対応するため、90 度のみ必要です。
また、画面に対する指の圧力が変わると、指の接触面積も変化します。force の直接的な代替手段ではありませんが、画面上の軽いブラシは、強く押す場合よりも表面積が小さくなるため、区別できます。
使用方法
まず、これを検出できるデバイスが必要です。Nexus 10 は問題なく動作します。Rick Byers のペイントの例を直接確認することをおすすめします。キャンバスを使用せずにこの機能を使用することもできます。
var touchHandler = function(e) {
e.preventDefault();
var touches = e.changedTouches;
var touch = touches[0]; // only concerned about first touch.
var rotationAngle = touch.rotationAngle || touch.webkitRotationAngle || 0;
var radiusX = touch.radiusX || touch.webkitRadiusX || 1;
var radiusY = touch.radiusY || touch.webkitRadiusY || 1;
var force = touch.force || touch.webkitForce || 0;
// Use the rotationAngle to rotate the 'p' element.
p.style.width = radiusX * 2 + 'px';
p.style.height = radiusY * 2 + 'px';
p.style.transform = "rotate(" + rotationAngle + "deg)";
};
document.documentElement.ontouchstart = touchHandler;
document.documentElement.ontouchend = touchHandler;
document.documentElement.ontouchmove = touchHandler;
実際にこの機能はどこで使用できますか？
ユーザーにすぐにメリットがもたらされるのは、次のような場合です。
- たとえば、ペイントや画像操作のウェブアプリでは、この情報を使用してキャンバスに適用されるストロークや効果を変更できます。タップ半径を使用してブラシのサイズを変更し、rotationAngle と組み合わせてキャンバス上のブラシの接触角度を変更できます。
- ジェスチャー認識の強化: rotationAngle を理解していれば、1 本の指のジェスチャーでオブジェクトを回転させることができます。
すべてのデバイスでこの機能は利用できますか？
いいえ。まだそれほど一般的ではありません。Nexus 10 の場合は、次のような画面が表示されます。
画像のクレジットは Rick Byers 様です。
デバイスがタッチの回転角度を認識できない場合、rotationAngle は 0 になり、radiusX と radiusY の値は同じになります（ただし、現在のタッチ サーフェス領域によって異なる場合があります）。
なんでわざわざ？
いい質問ですね。ウェブ上の多くの機能と同様に、これは追加機能です。
タップ イベントは、サポートされている場合に機能します。半径と回転値が使用可能な場合は、アプリを拡張して、ユーザーにより優れたエクスペリエンスを提供できます。すべてのユーザーが Wacom タブレットを持っているわけではありませんが、タブレットがある場合は、多くのペイント アプリケーションで利用できます。
ポインタ イベントはどうなりますか？
これは、タップイベント API を利用するデベロッパーのために、API を完全に機能させるためです。質問を少し回避しているのがお分かりでしょうか。真面目な話、Blink の PointerEvent の実装について詳しくは、Issue 471824 にスターを付け、Rick Byers のトラッキング ドキュメントをご覧ください。