Canvas II

Aus ProgrammingWiki

Archivierte Version vom 2017-03-26T10:01:46+00:00. Aktuelle Version

In diesem Arbeitsblatt wollen wir den vollen Funktionsumfang der Canvas-Bibliothek nutzen. Im Vergleich zum letzten Canvas-Arbeitsblatt ist dazu etwas mehr Code notwendig.

Beispiel

Wir zeichnen eine vertikale Linie von x=10,y=0 bis x=10, y=500:

function draw(){

   var c = document.getElementById('canvas1');
   var ctx = c.getContext('2d');
   ctx.clearRect(0,0,1000,500);

   
   ctx.moveTo(10,0);
   ctx.lineTo(10,500);

   ctx.stroke();
}

draw();

Wichtig: Die Zeilen 3,4,5 und 11 müssen Sie bei jeder Aufgabe in diesem Arbeitsblatt einfügen!

Referenz aller Canvas-Funktionen und -Einstellungen

Canvas II

Suche