Knöpfe in Canvas programmieren

DER · 1. August 2018

Hallo, ich bin mit meinem JS am Ende. Um 'Buttons' für Canvas zu programmieren, habe ich einen Code von Stackoverflow genommen, doch leide funktioniert er nicht.

Code

<script>
var mx = 640,
        my = 360;

    var buttons = [];

    canvas.addEventListener("click", function (event) {
        var x = event.pageX,
            y = event.pageY;


        buttons.forEach(function (element) {
            if(y > element.top && y < element.top + element.height && x > element.left && x < element.left + element.width) {

                alert("k");

            }else { alert('no'); 
                          context.beginPath();
                          context.arc(element.left+element.width/2,element.top+element.height/2,1,0,2*Math.PI);
                          context.stroke();
                                   }
        });
    }, false);

    buttons.push({
        text: "Play",
        top: my-25,
        left: mx-50,
        width: 100,
        height: 50
    });

    //render 
    buttons.forEach(function (element) {
        context.fillText(element.text, element.left + element.width/2, element.top+element.height/2);
        context.strokeRect(element.left, element.top, element.width, element.height);
    });
</script>

Alles anzeigen

Sollte der Code funktionieren, so sollte er zu Folge haben, dass bei einem Klick ins 'Play' Feld 'k' ausgegeben wird. Doch es wird immer nur 'no' ausgegeben. Um zu schauen, wo sich denn element.top und element.width befinden, habe ich bei diesen einen Punkt gezeichnet. Dieser ist genau dort, wo es sein sollte. Doch auch bei genauem Klick auf den Punkt kommt "no".

Was mache ich falsch? Der Code ist der exakt gleiche, wie der aus Stackoverflow.

DER · 1. August 2018

Habe den Fehler gefunden, doch das hat zu neuen Problemen geführt. Ich kann nur einen Knopf damit betreiben. Wenn ich einen zweiten hinzufüge, wird dieser zwar erkannt, aber bei trotzdem als 'no' gewertet.

Sempervivum · 1. August 2018

Wenn es um die Arbeit mit Canvas geht, empfehle ich, eine Bibliothek wie jCanvas zu verwenden, damit wird alles intuitiver und übersichtlicher. Deine Knöpfe würden dann so aussehen:

http://jsfiddle.net/Sempervivum/1e6ub9ad/22/

DER · 1. August 2018

Kann durchaus sein, da ich aber JS und das programmieren an sich erlernen möchte, habe ich entschlossen Bibliotheken erstmal weitestgehend auszulassen. Aber danke für den Tipp.

Sempervivum · 1. August 2018

Das Programmieren an sich erlernen kannst Du auch mit den Syntax einer Bibliothek. Vor 30, 40 Jahren meinten die Leute, man könne nur "richtig" Programmieren lernen, wenn man eine Assemblersprache erlernt und Hochsprachen wie Pascal oder C erst Mal außen vor lässt. Und wer redet heute noch von Assembler ...?

DER · 1. August 2018

Ja, aber was wenn ich mal selbst eine Bibliothek schreiben will?

Wenn Du schon mal hier bist: Ich habe zur Zeit das Problem, dass ich einen bestimmten Code erst ab einem bestimmten Zeitpunkt und unter einer bestimmten Bedingung aufrufen will, der Code selbst muss aber schon vorher geschrieben sein. Gibt es da irgendwelche Ansätze oder Möglichkeiten sowas in JS zu realisieren? Ich möchte einen Code nur dann ausführen, wenn eine bestimmte Funktion läuft.

Sempervivum · 1. August 2018

Wenn ich dich richtig verstanden habe, sollte das mit zwei Funktionen möglich sein:

Code

function func1() {
    // Hier der Code, der "vorher schon geschrieben sein soll"
}

function func2() {
    // dies ist die Funktion, die laufen soll, damit func1() aufgerufen wird
    // einfach func1 aufrufen
    func1();
    // weitere Aktionen in func2
}

Zu einfach? Wenn es nicht das ist, was Du meinst, beschreibe es genauer.

DER · 1. August 2018

Ja, zu einfach. Aber mittlerweile habe ich wieder alles geändert. Ich bin theoretisch noch immer bei dem Problem, dass ich es nicht hinrkriege die Sache mit den Knöpfen in eine Funktion zu rufen, um sie universel einsetzen zu können.

Arne Drews · 2. August 2018

Zitat von Sempervivum

Das Programmieren an sich erlernen kannst Du auch mit den Syntax einer Bibliothek. Vor 30, 40 Jahren meinten die Leute, man könne nur "richtig" Programmieren lernen, wenn man eine Assemblersprache erlernt und Hochsprachen wie Pascal oder C erst Mal außen vor lässt. Und wer redet heute noch von Assembler ...?

Bspw. ich. Du darfst die Anforderungen eines Webentwicklers nicht mit denen eines Core-/Hardware-Entwickler vergleichen. Zugegeben, ich selbst benötige auch fast nie Assembler, aber ich kenne genug Leute, deren hauptsächlicher Tätigkeitsprozess das ist.

Ehrlich gesagt ist mir die Aussage so wie Du es schreibst gar nicht geläufig. Dass Assembler nach Maschinensprache die Hardware naheste Entwicklung ist, ja. Aber dass man zuerst Assembler lernen sollte, wäre auch damals schon Quatsch gewesen, denn Assembler ist komplett anders als Hochsprachen.

Dem Vergleich kann ich so nicht zustimmen, DER hat imho schon die richtige Einstellung. JS lernst Du nicht anhand eines Framework oder einer Library. Das Grundverständnis vielleicht, aber nicht die Grundlagen der Basissprache selber.

Ganz egal ob JS, PHP oder was auch immer. Wer wirklich eine Sprache lernen will, sollte bei den Basics anfangen, Libraries/Frameworks sind höchstens weiterführend.

Knöpfe in Canvas programmieren

Jetzt mitmachen!

Teilen