如何取得 HTML5 Canvas 上的真實滑鼠位置？

畫布中的真實滑鼠位置

要使用滑鼠遊標在HTML5 畫布中繪製，通常必須將畫布定位在原點(0,0 )在父容器內。但是，如果將畫布位置調整為遠離原點，則繪製時可能會出現差異。

簡單的1:1 場景

如果畫布元素的尺寸與點陣圖尺寸完美對齊（1 :1 比率），使用以下程式碼片段捕捉滑鼠位置：

將此方法整合到您的事件中，提供事件和畫布為論點。它傳回一個詳細說明 x 和 y 滑鼠位置的物件。減去畫布位置以與元素本身對齊。

不同大小的元素和點陣圖

當畫布和點陣圖大小不同時，例如由於 CSS縮放或不同的像素方面比率，調整計算如下：

上下文轉換應用

如果畫布上下文經歷了旋轉或縮放等變換，請計算當前矩陣的逆矩陣以解釋這些變換。較新的瀏覽器透過 currentTransform 屬性提供對當前變換的訪問，而 Firefox 透過 mozCurrentTransformInverted 提供倒置矩陣。

如果需要自訂矩陣計算，請實現您自己的解決方案或利用現有的庫，例如以下提供的庫：[自訂矩陣解決方案](https://github.com/bebraw /calcGeometryFromPointOnTransformedCanvas)

套用逆矩陣調整元素相對性以與正確的滑鼠位置對齊後，將矩陣轉換為滑鼠座標。

或者，如果使用currentTransform 可行：

為了進一步簡化，請考慮使用一個處理所有這些步驟的綜合庫，例如最後一個程式碼區塊中提到的免費的MIT 許可的庫。

以上是如何取得 HTML5 Canvas 上的真實滑鼠位置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！