Do działania prezentowanego kodu potrzebny jest skrypt ‘events.js’, który możesz zaleźć tutaj.

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

Dodaj komentarz

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