Übung JavaScript Rectangle Canvas Methodhttps://www.cmseo.ch/getElementById?&atomFri, 29 Mar 2024 07:52:56 +0000stack.ch
https://stack.ch/
5aaf5361-eda1-11ee-8c11-005056bb85fbSimtech AG - Ausbildung - Internet Web Kurse - Kurs Javascript Programmierung - Kurs JavaScript ES6 Programmierung - Ressourcen - Kurs JavaScript ES6 Programmierung - Übungen OO - Übung JavaScript Rectangle Canvas Method
https://www.cmseo.ch/getElementById
5aaf54ea-eda1-11ee-8c11-005056bb85fbFri, 29 Mar 2024 07:52:56 +0000Übung JavaScript Rectangle Canvas Method
https://www.cmseo.ch/getElementById
5aaf5639-eda1-11ee-8c11-005056bb85fbFri, 29 Mar 2024 07:52:56 +0000
https://www.cmseo.ch/getElementById
5aaf5737-eda1-11ee-8c11-005056bb85fbFri, 29 Mar 2024 07:52:56 +0000Diese Übung basiert auf der Übung RectangleCanvas. Das Resultat bleibt gleich, es soll aber neu die Fläche angezeigt werden:Die Rectangle Klasse soll sich mit der Methode draw() selber zeichnen. Hierzu soll die Klasse die Farbe und via Boolean Flag das Rechteck mit Rand oder Filled zeichnen.Das folgende UML Diagramm zeigt dies auf:Die Methode draw(canvas) wird mit dem Canvas parametrisiert. Intern prüft die Methode das Fill-Flag und zeichnet das Rechteck in der gewünschten Farbe.Links über dem Rechteck ist die Fläche (Area) anzuzeigen. Solche soll über die Methode getArea() berechnet werden.Eine Referenz zum Zeichnen mit Canvas finden Sie unter https://www.w3schools.com/tags/ref_canvas.asp
https://www.cmseo.ch/getElementById
5aaf6179-eda1-11ee-8c11-005056bb85fbFri, 29 Mar 2024 07:52:56 +0000Lösen Sie bitte die Aufgabe wie folgt:Erweitern Sie die Klasse Rectangle in der Datei Rectangle.js mit den Attributen color und fill.Passen Sie die bestehende index.html Lösung so an, dass sich jedes Rechteck selber zeichnet.Das folgende Listing zeigt das HTML JavaScript:let myCanvas = document.getElementById('myCanvas');
let r1 = new Rectangle(20, 20, 100, 200, '#FF0000');
r1.draw(myCanvas);
let r2 = new Rectangle(140, 120, 200, 100, '#FFFF00', true);
r2.draw(myCanvas);Testen Sie das Resultat via Run -> Chrome Browser.
https://www.cmseo.ch/getElementById
5aaf640b-eda1-11ee-8c11-005056bb85fbFri, 29 Mar 2024 07:52:56 +0000Eine mögliche Lösung finden Sie hierÜber uns
https://www.cmseo.ch/about
Fri, 29 Mar 2024 07:52:56 +00005aaf695a-eda1-11ee-8c11-005056bb85fbAktuell
https://www.cmseo.ch/
Fri, 29 Mar 2024 07:52:56 +00005aaf6a2a-eda1-11ee-8c11-005056bb85fbAGB
https://www.cmseo.ch/agb
Fri, 29 Mar 2024 07:52:56 +00005aaf6ace-eda1-11ee-8c11-005056bb85fbBildungswege
https://www.cmseo.ch/bildungswege
Fri, 29 Mar 2024 07:52:56 +00005aaf6b67-eda1-11ee-8c11-005056bb85fbBlog
https://www.cmseo.ch/blog
Fri, 29 Mar 2024 07:52:56 +00005aaf6c0d-eda1-11ee-8c11-005056bb85fbRufen Sie mich an
https://www.cmseo.ch/callus
Fri, 29 Mar 2024 07:52:56 +00005aaf6ca6-eda1-11ee-8c11-005056bb85fbCharts
https://www.cmseo.ch/charts
Fri, 29 Mar 2024 07:52:56 +00005aaf6d3d-eda1-11ee-8c11-005056bb85fbConsulting
https://www.cmseo.ch/consulting
Fri, 29 Mar 2024 07:52:56 +00005aaf6dd7-eda1-11ee-8c11-005056bb85fbKontakt
https://www.cmseo.ch/contact
Fri, 29 Mar 2024 07:52:56 +00005aaf6e80-eda1-11ee-8c11-005056bb85fbAusbildung/Kurse
https://www.cmseo.ch/education
Fri, 29 Mar 2024 07:52:56 +00005aaf6f1b-eda1-11ee-8c11-005056bb85fbSoftware Engineering
https://www.cmseo.ch/engineering
Fri, 29 Mar 2024 07:52:56 +00005aaf6fb6-eda1-11ee-8c11-005056bb85fbFreelancer
https://www.cmseo.ch/freelancer
Fri, 29 Mar 2024 07:52:56 +00005aaf7050-eda1-11ee-8c11-005056bb85fbImpressum
https://www.cmseo.ch/impressum
Fri, 29 Mar 2024 07:52:56 +00005aaf70e7-eda1-11ee-8c11-005056bb85fbKursleiter
https://www.cmseo.ch/kursleiter
Fri, 29 Mar 2024 07:52:56 +00005aaf7180-eda1-11ee-8c11-005056bb85fbNetzwerk
https://www.cmseo.ch/network
Fri, 29 Mar 2024 07:52:56 +00005aaf721c-eda1-11ee-8c11-005056bb85fbReferenzen
https://www.cmseo.ch/references
Fri, 29 Mar 2024 07:52:56 +00005aaf72b5-eda1-11ee-8c11-005056bb85fbSitemap
https://www.cmseo.ch/sitemap
Fri, 29 Mar 2024 07:52:56 +00005aaf7358-eda1-11ee-8c11-005056bb85fbTools
https://www.cmseo.ch/tools
Fri, 29 Mar 2024 07:52:56 +00005aaf7442-eda1-11ee-8c11-005056bb85fbVision
https://www.cmseo.ch/vision
Fri, 29 Mar 2024 07:52:56 +00005aaf74e1-eda1-11ee-8c11-005056bb85fb