画面の端にカーソルが行ったらカーソル速度がとれない問題を解決するPointer Lock API

カーソルの速度を取りたいとき,
Javascriptだと普通,↓のような感じで変位をだして,それの時間微分的な処理で速度を近似すると思う.

// 位置
var currentX = e.clientX || e.pageX;
var currentY = e.clientY || e.pageY;

// 変位
var deltaX = currentX - lastMouseX;
var deltaY = currentY - lastMouseY;

でも画面の端にカーソルが到達してしまうと,
位置がまず変化しなくなるのでそれに応じて変位も速度も0になる.

それを解決する方法として, HTML5のPointer Lock APIがある.

demo

See the Pen Pointer Lock Demo by Yusuke Ujitoko (@ujitoko) on CodePen.

参考

http://www.formasterminds.com/quick_guides_for_masterminds/free_guides/Pointer_Lock_API.pdf