JavaScript: Canvas-Bezug auf ein Button?

Hey,

ich habe per Canvas und Chart eine Grafik erstellt. Gibt es eine Möglichkeit, eine Funktion zu schreiben, die mein Canvas erst erstellt, wenn zwei Funktionen ausgeführt werden?

Beispielweise:

<select>
  <option>Bmw</option>
  <option>Benz</option>
<select>
<select>
  <option>Kombi</option>
  <option>Limousiné</option>
<select>

Meine Arrays sind irgendwelche Zahlen, die mir dann in meiner Tabelle angegeben werden, wenn das jeweilige gewählt ist. Nun möchte ich noch hinzufügen, falls derjenige BMW und Limousiné auswählt, mein Canvas "aktiviert" wird und nicht schon irgendwie vorher zeichnet.

Answer 1

[regex9]

Du wirst eine Funktion (oder eine Abfolge von Befehlen, welche in eine Funktion verschoben werden sollten) haben, mit der auf dem Canvas gezeichnet wird. Den Funktionsaufruf fügst du deinem Event Listener zu, indem du bereits deine Tabelle zeichnen lässt.

selection.addEventListener("click", function(evt) {
  switch (selection.value) {
    case "Bmw":
      drawTable();
      drawOnCanvas();
      break;
    // further cases ...
  }
}

Da du sicherlich verschiedene Funktionen hast, in denen auf dem Canvas gezeichnet wird, macht es Sinn, die Variable für Canvas-Element und Context global zu definieren.

Beispiel:

var canvas = document.getElementById("someCanvas");
var context = canvas.getContext("2d");

function drawBmw() {
  context.fillStyle = "#ff0000";
  context.fillRect(0, 0, 150, 75);
  // ...
}
  
function drawBenz() {
  // ...
}

Außerdem solltest du beachten, dass es möglicherweise sinnvoll ist, vor jedem Zeichenvorgang nochmal die Zeichenfläche zu leeren.

Answer 2

[hairybear]

Ja natürlich kann man das.

Comments

[cool27]

Und wie gehe ich logisch am besten vor?

[hairybear]

@cool27

Z.B. mit

<select onchange="myFunction()">

Und dann in einer Bedingung abfragen, ob beide die richtige Option gewählt haben- Das wäre wohl die einfachste Möglichkeit. (Programmiere nicht oft in js)