search

JirkaDellOro / EIA2-Inverted

Material for the inverted classroom
https://jirkadelloro.github.io/EIA2-Inverted
13 stars 25 forks source link

Canvas an den Bildschirm anpassen #155

Closed KohlerAl closed 4 years ago

KohlerAl commented 4 years ago

Hallo Jirka, ich habe eine Frage zur Aufgabe, bzw. zur Aufgabenstellung. In der Aufgabenstellung steht, dass sich das Bild per CSS an den Bildschirm anpassen soll. Beim Umsetzen der Aufgabe hat meine erste Idee leider nicht richtig funktioniert und ich bin dann irgendwann auf die Idee gekommen, dass man Canvas einfach die Höhe und Breite von window geben könnte. Wenn die Seite neu geladen wird oder man das Browser-Fenster größer/ kleiner zieht könnte mit den entsprechenden Events (load und resize) das Bild an die neue Größe anpassen. Das funktioniert auch ganz gut, nur ist jetzt meine Frage, ob das nach der Aufgabenstellung auch erlaubt ist :)

https://kohleral.github.io/EIA2//L08_Canvas/Abgabe/L08_Virus.html https://github.com/KohlerAl/EIA2/blob/master/L08_Canvas/Abgabe/L08_Virus.ts

Alida

JirkaDellOro commented 4 years ago

Ja, das ist erlaubt. Man sollte aber auch ohne Programmcode an dieser Stelle auskommen können. Wenn Du html, body und canvas per CSS eine height und width von 100% gibst oder 100vh und 100vw oder so. Sollte einfach sein. Gegebenenfalls sollte man noch mit MediaQueries arbeiten....

JirkaDellOro commented 4 years ago

Achso... wenn Du per Code tatsächlich die Höhe und Breite des Canvas-Elements veränderst, also nicht lediglich die CSS-Skalierung, verändert sich damit dessen Pixelmaß und dein Bild passt nicht mehr vernünftig darauf. Dann müsstest Du die Zeichenmatrix ebenso anpassen.

KohlerAl commented 4 years ago

Alles klar, danke :) Die Ausgabe auf meinem Handy sieht eigentlich ganz gut aus, es ist alles da...

JirkaDellOro commented 4 years ago

Du hast deinen Code ja auch gleich adaptiv gemacht, so dass er den Canvas immer füllt. Klasse!