Question

似乎没有一种好方法可以将<canvas>视口基于鼠标指针的位置并且能够自由移动。基本上，就像市场上的其他第一人称游戏一样。

无法捕获鼠标在<canvas>元素内。
无法设置位置鼠标指针。
无法全屏显示使用<canvas>，即使一旦达到边缘，功能也会被破坏。

也有充分的理由。想象一下，恶意人员可以（并且肯定会）使用哪些可能的场景。

也许现在考虑几乎只在3D环境中使用过的东西还为时过早，这些东西还没有规范。

您的需求或解决方案是什么？

Answer 1

你可以获取canvas内的鼠标位置。

function getCursorPosition(e) {
    var x;
    var y;
    if (e.pageX != undefined && e.pageY != undefined) {
    x = e.pageX;
    y = e.pageY;
    }
    else {
    x = e.clientX + document.body.scrollLeft +
            document.documentElement.scrollLeft;
    y = e.clientY + document.body.scrollTop +
            document.documentElement.scrollTop;
    }

    x -= gCanvasElement.offsetLeft;
    y -= gCanvasElement.offsetTop;

    var cell = new Cell(Math.floor(y/kPieceHeight),
                    Math.floor(x/kPieceWidth));
    return cell;
}

From Dive Into HTML5: Let's Call it a Draw(ing Surface)

Answer 2

我认为没有一个好的解决方案 - 至少，直到我们得到鼠标锁定。无论你的解决方案多么优雅，如果你做一个令人兴奋的鼠标驱动游戏，用户将在某个时刻在画布区域外抽搐。即使他们不小心点击某个链接，当视图停止响应他们的鼠标时，他们的沉浸也会被打破。

对于节奏较慢的游戏，您可以：

使用单击并拖动即可转动。一旦用户开始在画布中拖动，您可以从他们开始拖动的点开始使用鼠标增量来确定转动的距离。由于用户按住按钮，因此不会意外点击。
将光标悬停在画布边缘附近转动，类似于RTS。这会变得更慢，但可能是最直观，最容易让用户意外发现的。
使用键盘查看，就像鼠标前FPS游戏（如Doom）一样。

值得注意的是，Firefox中有open feature request用于鼠标锁定。但是，不幸的是，这个，鼠标隐藏或全屏都不是WebGL规范的一部分。

Unity支持所有这些功能，因此，如果您真的需要FPS控件，这可能是一条路径。

画布：基于指针的视口/包含鼠标指针

2 个答案: