畫布：基於指針的視口/包含鼠標指針

似乎沒有一種很好的方式將<canvas>視口基於鼠標指針的位置並可以自由移動。基本上，就像市場上的其他第一人稱遊戲一樣。畫布：基於指針的視口/包含鼠標指針

沒有辦法在<canvas>元素內捕獲鼠標。
沒有辦法設置鼠標指針的位置。
無法全屏與<canvas>，即使一旦達到邊緣，功能將被打破。

也有很好的理由。想象一下，有什麼可能的情況可以（肯定會）被惡意人員利用。

也許現在想想幾乎只能在3D環境中使用的東西還爲時過早，這是目前還沒有規範的東西。

您的需求或解決方案是什麼？

來源

2011-03-13 Andre Backlund

我不認爲有這個一個很好的解決方案 - 至少，直到我們得到鼠標鎖定。無論你的解決方案多麼優雅，如果你製作了一個棘手的鼠標驅動的遊戲，用戶將在某個時刻在畫布區域之外抽搐。即使他們不小心點擊鏈接，當視圖停止響應鼠標時，他們的沉浸感也會被破壞。

對於慢節奏的遊戲，你可以：

使用點擊並拖動轉動。一旦用戶開始在畫布中拖動，您可以使用鼠標從他們開始拖動的點開始拖動以確定轉動的距離。因爲用戶按住按鈕，他們不會不小心點擊東西。
將鼠標懸停在畫布邊緣以轉動，類似於RTS。這會變得更慢，但可能是最直觀，最容易讓用戶意外發現的。
使用鍵盤來查看，就像鼠標前的FPS遊戲（如Doom）。

值得注意的是Firefox中有一個open feature request用於鼠標鎖定。但是，不幸的是，這不是，也不是鼠標隱藏或全屏是WebGL規範的一部分。

Unity支持所有這些功能，因此如果您確實需要FPS控件，則可能是一種查看路徑。

來源

2011-03-14 14:39:50

你可以得到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)

來源

2011-03-13 14:17:21 alex

是的，很明顯。但這不是我要找的。我正在探索不斷地並無限地向任一方向滾動視口的可能性。但是，一旦將鼠標移動到畫布之外，就會失去此能力。 – 2011-03-13 14:24:34

@abloodywar難道你不會移動你在畫布上繪製的內容，而不是滾動瀏覽器視口？ – alex 2011-03-13 14:29:46

畫布：基於指針的視口/包含鼠標指針

回答

相關問題