Übung JavaScript Rectangle Canvas Methodhttps://www.std.ch/gewünschten?&atomThu, 28 Mar 2024 14:02:39 +0000stack.ch
https://stack.ch/
d6673628-ed0b-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.std.ch/gewünschten
d66737a7-ed0b-11ee-8c11-005056bb85fbThu, 28 Mar 2024 14:02:39 +0000Übung JavaScript Rectangle Canvas Method
https://www.std.ch/gewünschten
d66738b9-ed0b-11ee-8c11-005056bb85fbThu, 28 Mar 2024 14:02:39 +0000
https://www.std.ch/gewünschten
d66739aa-ed0b-11ee-8c11-005056bb85fbThu, 28 Mar 2024 14:02:39 +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.std.ch/gewünschten
d6674295-ed0b-11ee-8c11-005056bb85fbThu, 28 Mar 2024 14:02:39 +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.std.ch/gewünschten
d66744e0-ed0b-11ee-8c11-005056bb85fbThu, 28 Mar 2024 14:02:39 +0000Eine mögliche Lösung finden Sie hierÜber uns
https://www.std.ch/about
Thu, 28 Mar 2024 14:02:39 +0000d66749c0-ed0b-11ee-8c11-005056bb85fbAktuell
https://www.std.ch/
Thu, 28 Mar 2024 14:02:39 +0000d6674a59-ed0b-11ee-8c11-005056bb85fbAGB
https://www.std.ch/agb
Thu, 28 Mar 2024 14:02:39 +0000d6674b17-ed0b-11ee-8c11-005056bb85fbBildungswege
https://www.std.ch/bildungswege
Thu, 28 Mar 2024 14:02:39 +0000d6674bb4-ed0b-11ee-8c11-005056bb85fbBlog
https://www.std.ch/blog
Thu, 28 Mar 2024 14:02:39 +0000d6674c46-ed0b-11ee-8c11-005056bb85fbRufen Sie mich an
https://www.std.ch/callus
Thu, 28 Mar 2024 14:02:39 +0000d6674ea4-ed0b-11ee-8c11-005056bb85fbCharts
https://www.std.ch/charts
Thu, 28 Mar 2024 14:02:39 +0000d6674f3d-ed0b-11ee-8c11-005056bb85fbConsulting
https://www.std.ch/consulting
Thu, 28 Mar 2024 14:02:39 +0000d6674fcd-ed0b-11ee-8c11-005056bb85fbKontakt
https://www.std.ch/contact
Thu, 28 Mar 2024 14:02:39 +0000d6675070-ed0b-11ee-8c11-005056bb85fbAusbildung/Kurse
https://www.std.ch/education
Thu, 28 Mar 2024 14:02:39 +0000d6675103-ed0b-11ee-8c11-005056bb85fbSoftware Engineering
https://www.std.ch/engineering
Thu, 28 Mar 2024 14:02:39 +0000d6675191-ed0b-11ee-8c11-005056bb85fbFreelancer
https://www.std.ch/freelancer
Thu, 28 Mar 2024 14:02:39 +0000d6675218-ed0b-11ee-8c11-005056bb85fbImpressum
https://www.std.ch/impressum
Thu, 28 Mar 2024 14:02:39 +0000d66752a1-ed0b-11ee-8c11-005056bb85fbKursleiter
https://www.std.ch/kursleiter
Thu, 28 Mar 2024 14:02:39 +0000d667532c-ed0b-11ee-8c11-005056bb85fbNetzwerk
https://www.std.ch/network
Thu, 28 Mar 2024 14:02:39 +0000d66753c3-ed0b-11ee-8c11-005056bb85fbReferenzen
https://www.std.ch/references
Thu, 28 Mar 2024 14:02:39 +0000d667544d-ed0b-11ee-8c11-005056bb85fbSitemap
https://www.std.ch/sitemap
Thu, 28 Mar 2024 14:02:39 +0000d66754dd-ed0b-11ee-8c11-005056bb85fbTools
https://www.std.ch/tools
Thu, 28 Mar 2024 14:02:39 +0000d66755ae-ed0b-11ee-8c11-005056bb85fbVision
https://www.std.ch/vision
Thu, 28 Mar 2024 14:02:39 +0000d6675645-ed0b-11ee-8c11-005056bb85fb