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.

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

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);
            

Dodaj komentarz

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