W tym rozwiązaniu wiadomość jest zapisywana w elemencie zewnętrznym co niweluje konieczność wymazywania i odrysowywania całej powierzchni canvas

 

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

Listing

function writeMessage(message) {
	wiad.innerHTML=message;				
};
function getMousePos(canvas, evt) {
	var rect = canvas.getBoundingClientRect();
	return {
		x : evt.clientX - rect.left,
		y : evt.clientY - rect.top
	};
};
var cv = document.getElementById("canvas");
var wiad = document.getElementById("wiad");
cv.addEventListener('mousemove', function(evt) {
	var mousePos = getMousePos(cv, evt);
	var message = 'Mouse position x: ' + Math.round(mousePos.x)
			+ ', y: ' + Math.round(mousePos.y);
	writeMessage(message);
}, false);
            

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *