Hausaufgaben

09.01.2017 11:31 Uhr

Teil 1 Canvas:

Dieses Kleeblatt kann mit Canvas gezeichnet werden.

var kleeblatt = document.getElementById("klee");
var ctx = kleeblatt.getContext("2d");

//Text:
    ctx.font="17px Georgia";
    ctx.fillStyle = '#e6e600';
    ctx.fillText("Viel Glück im neuen Jahr!",10,25);


//Stiel:

    ctx.strokeStyle = "#006600";
    ctx.lineWidth = 0.3;

    ctx.beginPath();
    ctx.moveTo(115,80);
    ctx.bezierCurveTo(20,100,200,100,235,135);
    ctx.stroke();

//Blätter:
//Blatt 1: 

    ctx.strokeStyle = "black";
    ctx.lineWidth = 0.8;

    ctx.fillStyle = "#7BA32D";
    ctx.beginPath();
    ctx.moveTo(55,70);
    ctx.quadraticCurveTo(20,100,115,80);
    ctx.stroke();
    ctx.closePath();
    ctx.fill();

    ctx.fillStyle = "#7BA32D";
    ctx.beginPath();
    ctx.moveTo(55,70);
    ctx.quadraticCurveTo(40,30,115,80);
    ctx.stroke();
    ctx.closePath();
    ctx.fill();

// Blatt 2:

    ctx.fillStyle = "#7BA32D";
    ctx.beginPath();
    ctx.moveTo(115,80);
    ctx.quadraticCurveTo(80,20,130,50);
    ctx.stroke();
    ctx.closePath();
    ctx.fill();

    ctx.fillStyle = "#7BA32D";
    ctx.beginPath();
    ctx.moveTo(115,80);
    ctx.quadraticCurveTo(200,40,130,50);
    ctx.stroke();
    ctx.closePath();
    ctx.fill();

//Blatt 3:

    ctx.fillStyle = "#7BA32D";
    ctx.beginPath();
    ctx.moveTo(115,80);
    ctx.quadraticCurveTo(235,60,185,85);
    ctx.stroke();
    ctx.closePath();
    ctx.fill();

    ctx.fillStyle = "#7BA32D";
    ctx.beginPath();
    ctx.moveTo(115,80);
    ctx.quadraticCurveTo(190,115,185,85);
    ctx.stroke();
    ctx.closePath();
    ctx.fill();

//Blatt 4:

    ctx.fillStyle = "#7BA32D";
    ctx.beginPath();
    ctx.moveTo(115,80);
    ctx.quadraticCurveTo(180,135,110,115);
    ctx.stroke();
    ctx.closePath();
    ctx.fill();

    ctx.fillStyle = "#7BA32D";
    ctx.beginPath();
    ctx.moveTo(115,80);
    ctx.quadraticCurveTo(60,130,110,115);
    ctx.stroke();
    ctx.closePath();
    ctx.fill();

//Kleeblattlinien:

    ctx.strokeStyle = "#006600";
    ctx.lineWidth = 0.3;

    ctx.beginPath();
    ctx.moveTo(115, 80);
    ctx.lineTo(65, 71);
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.moveTo(115, 80);
    ctx.lineTo(127, 55);
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.moveTo(115, 80);
    ctx.lineTo(175, 85);
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.moveTo(115, 80);
    ctx.lineTo(110, 110);
    ctx.stroke();
    ctx.closePath();

Wie könnte dieser Code einfacher/übersichtlicher/leichter verstehbarer gestaltet werden?


Mittels einfacher Canvas Transformationen kann das Bild wie folgt verändert werden:

Bitte ergänzen sie die Javascript Datei entsprechend.


Teil 2 Lokaler Server:

Praktische Aufgabe:

  1. Installieren Sie XAMPP.
  2. Greifen Sie auf den Server zu, indem Sie im Browser http://localhost (127.0.0.1) eingeben.
  3. Starten Sie die benötigten Server über das Control-Panel.
  4. Laden Sie localhost erneut.
  5. Kopieren Sie Ihr bisheriges Website-Projekt in den htdocs-Ordner.
  6. Greifen Sie auf ihre Seiten zu, indem Sie im Browser http://localhost/dateiname.html eingeben.

Teil 3 Ajax:

Kommentieren sie bitte den Code auf der Folie „Ajax in der Praxis“.

Welches entscheidende Detail fehlt im Code auf der Folie „Ajax in der Praxis“ für eine funktionierende Anwendung?

Kleiner Hinweis: Der Code ist trotz dessen vollständig.

vorherige Seite

Schlagwörter: