示例

本示例將說明如何獲取鼠標相對于畫布的位置，例如(0,0)HTML5 Canvas的左上角。的e.clientX和e.clientY將獲得相對于文檔的頂部位置的鼠標，來改變這種是基于畫布的頂部，我們減去left，并right從客戶端X和Y的畫布位置

var?canvas?=?document.getElementById("myCanvas");

var?ctx?=?canvas.getContext("2d");

ctx.font?=?"16px?Arial";

canvas.addEventListener("mousemove",?function(e)?{

var?cRect?=?canvas.getBoundingClientRect();????????// 獲取CSS pos，以及寬度/高度

var?canvasX?=?Math.round(e.clientX?-?cRect.left);??// 減去畫布的“左”

var?canvasY?=?Math.round(e.clientY?-?cRect.top);???// 從X / Y位置

ctx.clearRect(0,?0,?canvas.width,?canvas.height);??// (0,0)畫布的左上方

ctx.fillText("X:?"+canvasX+",?Y:?"+canvasY,?10,?20);

});

可運行的例子

之所以使用，Math.round是因為要確保x,y位置為整數，因為畫布的邊界矩形可能沒有整數位置。

總結

以上是生活随笔為你收集整理的html 获取鼠标在canvas上的坐标,html5-canvas 检测鼠标在画布上的位置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。