Canvas: Skipiste - JirkaDellOro/EIA2 GitHub Wiki

Zeichnen Sie das Bild einer noch unbelebten Skipiste per Code auf einem Canvas-Element mit Hilfe des CanvasRenderingContext2D.

Im Hintergrund sollen sich Berge, Wolken und/oder andere Objekte befinden, im Vordergrund natürlich Bäume und ein Lift. Legen Sie das Bild so an, dass später noch bewegte Skifahrer integriert werden können.

Das Konzept besteht diesmal vordringlich aus Zeichnungen, und zwar eine für die gesamte Landschaft und mehrere weitere für die Details wie Bäume. Die Maße in Pixel müssen den Zeichnungen zu entnehmen sein, ebenso die Zeichenbefehle, die Sie verwenden möchten. Wählen Sie eine Canvasgröße von 800x600 Pixel. Per CSS können Sie die Seite skalieren lassen, so dass sie sich auf verschiedenen Endgeräten, insbesondere Smartphones, sinnvoll darstellt.

Platzieren Sie mehrere Bäume im Bild. Planen Sie aber auch einen Bereich im Bild, in dem später eine ganze Menge von Bäumen mit Hilfe von Schleifen und Zufall platziert werden. Somit sieht die Skipiste bei jedem Aufruf ein wenig anders aus.

Experimentieren Sie mit den grundlegenden Anweisungen des CanvasRenderingContext2D, beachten Sie die MindMap und die Referenzen darin.

Viel Spaß mit der Skipiste!