• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Canvas Array onclick

M

mmichaa

New member
Hallo!

Vll kann mir hier jemand weiterhelfen, kann noch nicht so gut Javascript..
Also ich habe in der Html Seite ein Canvas Element auf dem ich mit Javascript drauf etwas zeichne. Ich habe ein Array mit Bildern, kann diese auch zeichnen. Nun möchte ich aber auf diese Bilder klicken können, sodass, zb wenn ich auf Bild1 klicke, function eins aufgerufen wird, bei bild2 function zwei usw..
Hab in einer for schleife so etwas stehen:
testarray.onclick = eins (); Funktioniert aber nicht :/

Jemand Ideen?
Danke :)
 
Zuletzt bearbeitet von einem Moderator:
- deine Array-Elemente müssen Events auch unterstützen (geht aus der Beschreibung nicht eindeutig hervor, was genau in testarray steckt)
- die onevent-Eigenschaften sind veraltet, nimm besser addEventListener() (dann steigt dein Skript auch aus, wenn das Element kein EventListener ist)
- onclick erwartet eine Funktion, nicht undefined (oder was auch immer eins() zurückgibt)
- m.W.n. sind Bilder in einem Canvas keine Eventlistener => https://www.w3.org/wiki/Html/Elements/map
 
Hi,
das geht so ohne weiteres nicht, bzw. man muss etwas tricksen. Hier ein kleines Beispiel wie man das angehen könnte:
HTML: 
<!DOCTYPE html>

<head>

    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <title>Test</title>

    <script>

    	var images = []; 

    	var canvasOffsetLeft, canvasOffsetTop;

	    function init() {

	    	//var context = document.getElementById( 'canvas1' ).getContext( '2d' );
	        var canvas = document.getElementById( 'canvas' );
	        	canvas.addEventListener( 'click', clickHandler, false );

	        canvasOffsetLeft = canvas.offsetLeft;
	        canvasOffsetTop = canvas.offsetTop;

	        var context = canvas.getContext( '2d' );

	        var x = 50;
	        var y = 50;
	        var width = 217;
	        var height = 422;
			
			var img = new Image();
				img.onload = function () {
				    context.drawImage( img, x, y );
				}
				img.src = "images/latest.png";
			
			images.push( { img:img, id:'Bild1', width:width, height:height, left:x, top:y,  } );

	    };

	    function clickHandler( event ) {

	    	var x = event.pageX - canvasOffsetLeft,
		        y = event.pageY - canvasOffsetTop;

		    images.forEach( function( img ) {

		        if ( y > img.top && y < img.top + img.height && x > img.left && x < img.left + img.width ) {

		            //alert( img.id + ' clicked' );
		            console.log( img.id + ' clicked' );

		        }

		    } );

	    };

    </script>

</head>

<body onload="init()">

    <canvas id='canvas' width='640' height='640'></canvas>

</body>

</html>

Vielleicht hilft dir das weiter.
 
Wenn das wirklich Bilder sind, die auch in einem <img> angezeigt werden können, würde ich dir raten, dass du auch <img> verwendest und nicht <canvas>. Dann ist die ganze Event-Geschichte viel einfacher.

Oder warum willst du unbedingt <canvas> verwenden?
 
Wenn das für ein Spiel sein soll und die Bilder z.B. Spielsteine/Figuren oder was auch immer sein sollen, dann musst du dran denken die Positionen/Größen usw. immer zu aktualisieren ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben