Übung JavaScript Shape Poly Canvashttps://www.golabs.ch/JSON Training?&atomThu, 28 Mar 2024 14:38:51 +0000stack.ch
https://stack.ch/
e5671d43-ed10-11ee-8c11-005056bb85fbSimtech AG - Ausbildung - Internet Web Kurse - Kurs Javascript Programmierung - Kurs JavaScript ES6 Programmierung - Ressourcen - Kurs JavaScript ES6 Programmierung - Übungen OO - Übung JavaScript Shape Poly Canvas
https://www.golabs.ch/JSON Training
e5671ede-ed10-11ee-8c11-005056bb85fbThu, 28 Mar 2024 14:38:51 +0000Übung JavaScript Shape Poly Canvas
https://www.golabs.ch/JSON Training
e5672081-ed10-11ee-8c11-005056bb85fbThu, 28 Mar 2024 14:38:51 +0000
https://www.golabs.ch/JSON Training
e56721a3-ed10-11ee-8c11-005056bb85fbThu, 28 Mar 2024 14:38:51 +0000Diese Übung basiert auf der Übung Shape Canvas. Neu sollen alle Shapes in einem Shape Array über die Funktion initShapes() initialisiert werden. Danach zeichnen wir die Shapes über die Funktion drawShapes(canvas).Das folgende Script zeigt das neue HTML Canvas auf:<!DOCTYPE html>
<html>
<head>
<title>Shape Poly Canvas</title>
<script src="Shape.js"></script>
<script src="Rectangle.js"></script>
<script src="Oval.js"></script>
<script>
let shapes = [];
function initShapes() {
// TODO
}
function drawShapes(canvas) {
// TODO
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400" style="background: #0000ff;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
let myCanvas = document.getElementById('myCanvas');
initShapes();
drawShapes(myCanvas);
</script>
</body>
</html>Das Resultat der Anzeige soll gleich bleiben:
https://www.golabs.ch/JSON Training
e56729f6-ed10-11ee-8c11-005056bb85fbThu, 28 Mar 2024 14:38:51 +0000Lösen Sie bitte die Aufgabe wie folgt:Passen Sie die HTML Datei gemäss dem obigen Script an.Programmieren Sie die Funktion initShapes() aus.Programmieren Sie die Funktion drawShapes(canvas) aus.Testen Sie das Resultat via Run -> Chrome Browser.Ergänzen Sie die Klasse Shape mit den folgenden Methoden:getArea() {
return 0.0;
}
draw(canvas) { throw 'not supported'; }Diese Anpassung ist für die Lösung nicht notwendig aber kann die Subklassen entlasten.
https://www.golabs.ch/JSON Training
e5672c90-ed10-11ee-8c11-005056bb85fbThu, 28 Mar 2024 14:38:51 +0000Eine mögliche Lösung finden Sie hierÜber uns
https://www.golabs.ch/about
Thu, 28 Mar 2024 14:38:51 +0000e5673241-ed10-11ee-8c11-005056bb85fbAktuell
https://www.golabs.ch/
Thu, 28 Mar 2024 14:38:51 +0000e56732ea-ed10-11ee-8c11-005056bb85fbAGB
https://www.golabs.ch/agb
Thu, 28 Mar 2024 14:38:51 +0000e567338a-ed10-11ee-8c11-005056bb85fbBildungswege
https://www.golabs.ch/bildungswege
Thu, 28 Mar 2024 14:38:51 +0000e5673429-ed10-11ee-8c11-005056bb85fbBlog
https://www.golabs.ch/blog
Thu, 28 Mar 2024 14:38:51 +0000e56734c7-ed10-11ee-8c11-005056bb85fbRufen Sie mich an
https://www.golabs.ch/callus
Thu, 28 Mar 2024 14:38:51 +0000e567356b-ed10-11ee-8c11-005056bb85fbCharts
https://www.golabs.ch/charts
Thu, 28 Mar 2024 14:38:51 +0000e5673605-ed10-11ee-8c11-005056bb85fbConsulting
https://www.golabs.ch/consulting
Thu, 28 Mar 2024 14:38:51 +0000e56736b4-ed10-11ee-8c11-005056bb85fbKontakt
https://www.golabs.ch/contact
Thu, 28 Mar 2024 14:38:51 +0000e5673754-ed10-11ee-8c11-005056bb85fbAusbildung/Kurse
https://www.golabs.ch/education
Thu, 28 Mar 2024 14:38:51 +0000e56737f1-ed10-11ee-8c11-005056bb85fbSoftware Engineering
https://www.golabs.ch/engineering
Thu, 28 Mar 2024 14:38:51 +0000e56738a9-ed10-11ee-8c11-005056bb85fbFreelancer
https://www.golabs.ch/freelancer
Thu, 28 Mar 2024 14:38:51 +0000e5673941-ed10-11ee-8c11-005056bb85fbImpressum
https://www.golabs.ch/impressum
Thu, 28 Mar 2024 14:38:51 +0000e56739db-ed10-11ee-8c11-005056bb85fbKursleiter
https://www.golabs.ch/kursleiter
Thu, 28 Mar 2024 14:38:51 +0000e5673a78-ed10-11ee-8c11-005056bb85fbNetzwerk
https://www.golabs.ch/network
Thu, 28 Mar 2024 14:38:51 +0000e5673b0e-ed10-11ee-8c11-005056bb85fbReferenzen
https://www.golabs.ch/references
Thu, 28 Mar 2024 14:38:51 +0000e5673beb-ed10-11ee-8c11-005056bb85fbSitemap
https://www.golabs.ch/sitemap
Thu, 28 Mar 2024 14:38:51 +0000e5673c85-ed10-11ee-8c11-005056bb85fbTools
https://www.golabs.ch/tools
Thu, 28 Mar 2024 14:38:51 +0000e5673d2a-ed10-11ee-8c11-005056bb85fbVision
https://www.golabs.ch/vision
Thu, 28 Mar 2024 14:38:51 +0000e5673dbf-ed10-11ee-8c11-005056bb85fb