Koordynaty wskaźnika myszy (3) (HTML5 canvas)

Koordynaty wskaźnika myszy (3)

Strona używa skryptu events.js

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

window.onload = function(){
	function writeMessage(message) {
		wiad.innerHTML = message;
	};
	var events = new Events("canvas");
	var cv = events.getCanvas();
	var ctx = events.getContext();
	var wiad = document.getElementById("wiad");
	cv.addEventListener('mousemove', function() {
		var mousePos = events.getMousePos();
		if (mousePos != null) {
			var message = 'Mouse position x: ' + Math.round(mousePos.x)
					+ ', y: ' + Math.round(mousePos.y);
			writeMessage(message);
		}
	}, false);
	cv.addEventListener('mouseout', function(){
		writeMessage('Użyj myszy');
	}, false);
	events.listen();
	writeMessage("Użyj myszy");
};