Koordynaty wskaźnika myszy
Ta metoda nie jest optymalna. Zapis wiadomości na canvas powoduje konieczność wymazywania i rysowania całej zawartości canvas. Zajrzyj do następnego rozwiązania.
Listing
function writeMessage(canvas, message) {
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = '16pt';
context.fillStyle = 'black';
context.fillText(message, 10, 25);
};
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x : evt.clientX - rect.left,
y : evt.clientY - rect.top
};
};
var cv = document.getElementById("canvas");
cv.addEventListener('mousemove', function(evt) {
var mousePos = getMousePos(cv, evt);
var message = 'Mouse position: ' +'x: '+ mousePos.x + ', '
+ 'y: '+ mousePos.y;
writeMessage(cv, message);
}, false);